wrong Flexbox size

Question

I want to make 3 blocks with flex. the first must occupy an entire column and the other 2 must be arranged in the second column with 50% of the height each. the first of the second column being an image, I would like the third, which contains only text, to be the same height. unfortunately, even if this text block seems to have the same size as my image, the size of the 1st column is limited to the end of the text in this block.

.superposition {
  display: flex;
  width: 70%;
}
.block-orange {
  background-color: #F26522;
  color: white;
  padding: 10px;
  flex: 0 0 30%;
}
.superposition .flex-col {
  display: flex;
  flex-direction: column;
}
.superposition div div {
  flex: 0 0 50%;
}
.bg-white {
  background-color: yellow;
  color: #627188;
}
.bg-grey{
  background-color: grey;
 }

<section class="superposition">
    <div class="block-orange">
        <h2>bright ass orange</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
     </div>
     <div class="flex-col">
         <div class="bg-grey">
             <img src="img/header-soleil.png" alt="couché de soleil">
         </div>
         <div class="bg-white">
              <h2>finaly a layout that blows your head off</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
               </p>
         </div>
     </div>
</section>

why the first column (block-orange) does not adapt in height to the second column?

You're using flexbox so use flexbox `flex:1 0 0` instead of `flex:0 0 50%` with the addition of `min-height:0;` it should force the two div to be fixed a 50% of the parents height `min-height:0;` ignores the content, so there will some overflow — Rainbow, May 17 '21 at 21:53
@ZohirSalak Since [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) specifies how "remaining space" is distributed, the divs will not necessarily stay 50% of the parents' height if the lengths of their contents are unequal. [Example here](https://jsfiddle.net/ds1mzcon/). I might suggest a [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) instead. — showdev, May 17 '21 at 21:59
@showdev that why you need `min-height:0;` to ignore content — Rainbow, May 17 '21 at 22:01
@ZohirSalak But then we have the same issue of overflowing content that doesn't expand siblings. [See here](https://jsfiddle.net/ds1mzcon/1/). — showdev, May 17 '21 at 22:02
Overflow is not an issue here, at least the op didn't point that out for the second column, One can always make use of scrollbar, For the first column overflow issue all it needs is `align-items:flex-start;` — Rainbow, May 17 '21 at 22:05

showdev · Accepted Answer · 2021-05-18T05:27:51.303

It seems that you want a grid in which:

Content can expand column height.
Column heights always match.
Two rows are each 50% column height.

This sounds like a "two-dimensional" layout, controlled by both row and column.
Building such layouts with flexbox will likely be a struggle and/or produce fragile layouts.

For reference, see Relationship of grid layout to other layout methods:

do I only need to control the layout by row or column – use a flexbox

do I need to control the layout by row and column – use a grid

Also see Equal height rows in CSS Grid Layout.

I recommend a grid layout instead.
Here's a demonstration:

body {
  margin: 0;
}

.superposition {
  display: grid;
  grid-template-columns: 30% 40%;
  grid-auto-rows: 1fr;
}

.block-orange {
  background-color: orange;
  grid-row: 1/3;
}

.bg-grey {
  background-color: grey;
}

.bg-white {
  background-color: yellow;
}

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

.cellpad {
  box-sizing: border-box;
  padding: 1em;
}

<section class="superposition">
  <div class="block-orange cellpad">
    <h2>bright orange</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
  </div>
  <div class="bg-grey">
    <img src="https://fakeimg.pl/440x320/282828/eae0d0/" alt="">
  </div>
  <div class="bg-white cellpad">
    <h2>finally a layout that blows your mind</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
    </p>
  </div>
</section>

thank you, I also wondered if the use of the grids was not more judicious. I admit I'm more familiar with flex-box, but grids are useful in some cases. i will study this — Fouvet Sébastien, May 18 '21 at 00:47

Rounin · Answer 2 · 2021-05-17T22:54:03.013

1

To achieve the result you are looking for, one approach would be to apply

flex-direction: column;

to the entire .superposition parent <div>, in combination with:

flex-wrap: wrap;

which will ensure that if .block-orange occupies 100% of the height of .superposition, then .bg-grey will follow it by starting at the top of .superposition, to the right of .block-orange.

i.e. The divs are still wrapping but they are wrapping horizontally, rather than wrapping vertically.

Working Example:

.superposition {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 70%;
  height: 500px;
}

.block-orange {
  flex: 1 0 100%;
  width: 30%;
  padding: 0 10px;
  color: white;
  background-color: #F26522;
}

.bg-grey,
.bg-white {
  flex: 0 0 50%;
  width: 70%;
  padding: 0 10px;
}
  
.bg-white {
  color: #627188;
  background-color: yellow;
}

.bg-grey {
  background-color: grey;
 }

<section class="superposition">
  
  <div class="block-orange">
    <h2>bright ass orange</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
  </div>
  
  <div class="bg-grey">
    <img src="img/header-soleil.png" alt="couché de soleil">
  </div>

  <div class="bg-white">
    <h2>Finally, a layout that blows your head off</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.</p>
  </div>

</section>

edited May 17 '21 at 22:54

answered May 17 '21 at 22:48

Rounin

27,134
9
83
108

I'm not sure whether it's important for the OP, but is there a way to handle more content in the second column bottom row? [Example here](https://jsfiddle.net/nL5chyuj/) – showdev May 17 '21 at 23:21
1

thank you. I adapted your solution and it works, I should have thought about it. I simply had to pass the image to a background-image, otherwise the behavior of the bg-grey block is not the desired one. the image tends to overflow or not fill the space, for example making bg-white jump on a third column. – Fouvet Sébastien May 18 '21 at 00:33
additional question: this solution obliges me to give a fixed size (height) to my container, which I wanted to avoid, especially for the responsive. an idea to do without? – Fouvet Sébastien May 18 '21 at 00:37
1

I think @showdev is right. If you need that much control over both `x` and `y` dimensions, you are almost certainly better off using **CSS Grid**. I love **Flexbox** but it is intended in the main for one-dimensional, rather than two-dimensional presentation. Consider making showdev's answer your preferred answer. If you want to get your head around **CSS Grid** quickly, I can highly recommend the very accessible https://cssgridgarden.com/ tutorial. – Rounin May 18 '21 at 10:21
How is this the accepted answer ? Did you at least try to put an actual image in there ? If the image is smaller than the available space. no issue there, if not everything breaks https://jsfiddle.net/6b54ykLv/ – Rainbow May 18 '21 at 12:13

wrong Flexbox size

2 Answers2