Resize flex items to fit container (prevent items from overflowing)

Question

I've been struggling with an issue that i think will have a pretty simple solution, but i just can't see it right now. I have a nested flexbox layout. The first level of flex items are divs that are display:flex themselves, and depending on class they can have a flex-directon: of row or column. Both the first and second level of these nested flex items should grow to fill up the remaining parent size, and shrink if new elements are added, never overflowing.

My Problem: When adding new flex items to the "first level", this seems to work fine. However, adding new flex items to the second level seems to always overflow the parent container height.

As i'm not really good at describing stuff like this, here's a picture of what i need: The purple box is the parent container (not flex) The orange box is the flex container with flex-direction: row, with the red lines being its flex items (each item is a flexbox as well). The blue lines are the nested flex items.

Nested Flexbox layout

Adding new red items works and expands or shrinks as needed, but adding new blue items, overflows the container. https://jsfiddle.net/t40x7or8/

Here's my code sample: CSS

  width: 1800px;
  height: 500px;
  border: 4px blue solid;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-item {
  flex-grow: 1;
  flex-basis: 0;

  display: flex;
}

.flex-item > div {
  flex-grow: 1;
  border: 1px solid orange;
}

.height-1 {
  flex-direction: column;
  max-height: 100%;
}

.height-2 {
  max-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

  <div class="flex-container">

    <div class="height-2 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/600" />
      </div>
    </div>

    <div class="height-1 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/601" />
      </div>
      <div class="img-div">
        <img src="https://picsum.photos/1080/602" />
      </div>

    </div>
    </div>
  </div>

Sorry for the chaotic description, i'm quite bad at these kind of things. Thanks for the help

Answer 1

I think we should use flex: 1 1 0 for the fix the layout of the flex items.

And using width: 100% to control the size of the inner image.

https://jsfiddle.net/ramseyfeng/kxf46bju/

 .page { border: 3px solid green; width: 600px; height: 300px; } .flex { display: flex; } .cols { display: flex; flex-direction: row; } .rows { display: flex; flex-direction: column; } .flex-1-1-0 { flex: 1 1 0; } .img-div { flex: 1 1 0; display: flex; } .img-div img { width: 100%; }

 <div class="page cols"> <div class="flex-1-1-0 rows"> <div class="img-div"> <img src="https://picsum.photos/1080/600" /> </div> </div> <div class="flex-1-1-0 rows"> <div class="img-div"> <img src="https://picsum.photos/1080/601" /> </div> <div class="img-div"> <img src="https://picsum.photos/1080/602" /> </div> </div> <div class="flex-1-1-0 rows"> <div class="img-div"> <img src="https://picsum.photos/1080/607" /> </div> <div class="img-div"> <img src="https://picsum.photos/1080/608" /> </div> </div> <div class="flex-1-1-0 rows"> <div class="img-div"> <img src="https://picsum.photos/1080/605" /> </div> <div class="img-div"> <img src="https://picsum.photos/2000/1000" /> </div> <div class="img-div"> <img src="https://picsum.photos/2000/1001" /> </div> </div> </div>