wrong Flexbox size

user_15954888 0
Viewed 135

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? this is what I get.

sass css html
2 Answers

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>

user_9242990

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>

user_38977750
Related