CSS - two row flexbox layout - having one row's width be determined by the second row's

Question

I have a fairly specific CSS issue.

Please look at the codepen, as pretty much everything is explained in there... but here is a bit more explanation:

THE GOAL:

There are two rows (inside a container) that both have the same basic flexbox implementation -

{
    width: auto;
    display: flex;
    align-items: flex-start;
}

The top row houses a page header, with a title on the right, and an image flush right. The bottom row also houses two divs - the left div has a static width, but the right is fluid, depending on whatever text is inside there (which changes from pageload to pageload - in reality this will be a list of names with varying lengths).

The goal is for the top row's width to be determined by the bottom row, via using CSS. But I have no idea how to do this in flexbox. Currently the display:flex container divs' widths are both 100% of the browser.

The bottom row's layout and implementation is set in stone / needs to use flexbox, but the top row is flexible in how it is accomplished.

I am familiar with CSS and know this is not usually how it goes, in general width is passed down from the parent container... so I'm not even sure if this is possible? I can break down and do it in JS if needed, but I always prefer a CSS-only solution!

Any thoughts would be greatly appreciated!

Answer 1

You can do something like this. I think all you would need to do in your code is add one more wrapper layer between your container and your two flex boxes.

.page{
  display: flex;
  justify-content: center;
  border: 1px solid black;
}

.container{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top{
  width: 100%;
  height: 200px;
  background-color: lightgreen;
}

.bottom{
  display: flex;
  gap: 20px;
}

.bottomLeft{
  width: 250px;
  height: 100px;
  background-color: lightblue;
}

.bottomRight{
  min-width: 200px;
  background-color: pink;
}

<div class="page">
  <div class="container">
    <div class="top">
      Put whatever you like in here
    </div>

    <div class="bottom">
      <div class="bottomLeft">
        This is statically sized
      </div>
      <div class="bottomRight">
        <p>
          Some words and stuff<br>
          Some words and stuff<br>
          Some words and stuff<br>
          Some words and stuff<br>
          Some words and stuff<br>
          Some words and stuff<br>
          Some words and stuff<br>
        </p>
        
      </div>
    </div>
  </div>

</div>