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

cascade
March 23, 2023
220 views
0 votes
2 Answers

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!

Answers

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>

Not super certain if this is what you really want to happen. First you forgot to have closing paragraph. You can contain your 2 elements in a max-width so they can align the way you want them to be. On your pageContent–fluidRight you can try to put a max width on it so the text will wrap on its own. See sample below if this is what you mean and let me know.

.container {
  width: auto;
  max-width:1440px;
  margin: 0 auto;
}

.basicFlex {
  width: auto;
  display: flex;
  align-items: flex-start;
  padding: 0 16px;
  border: 1px grey solid;
}

.pageHeader {
  flex-direction: row;
}
.pageHeader--title {
  flex-grow: 2;
}
img {
  height: 100px;
  margin-left: 20px;
}

.pageContent {
  justify-content: center;
}
.pageContent--staticLeft {
  background: red;
  width: 100%;
  min-width: 220px;
  min-height:200px
}
.pageContent--fluidRight {
  background: DeepSkyBlue;
  margin-left: 20px;
  max-width: 822px;
}

<div class="container">
  <div class="pageHeader basicFlex">
    <div class="pageHeader--title">
      Here is the Page Title! I would like for this to be aligned with the left side of the red box.
    </div>
    <img src="https://rfbi.com.au/wp-content/uploads/Stay-Active-web-icon-100px-x-100px-300x300.jpg"/>
  </div>
  
  <div class="pageContent basicFlex">
    <div class="pageContent--staticLeft">
      <p>The goal is for the width of .pageHeader to be the same as the width of only the elements inside .pageContent (ie - 822px (the red div) + 20px (margin between) + ??? (the width of the yellow div).</p>
    </div>
    <div class="pageContent--fluidRight">
      <p>Depending on how long this text is<br>
        (which varies from pageload to pageload),<br> this div will be wider or more narrow.<br>Feel free to edit. Depending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text is Depending on how long this text isDepending on how long this text isDepending on how long this text is
      
      </p>
    </div>
  </div>
  
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers