Flexbox 2 divs different height

Question

How do I get this working in flexbox:

When the red box has more content than the green box (see my example) the green box should not get the same height as the red box but only what's needed.

.flex {
  display: flex;
}

.border {
  border: 2px solid black;
}

.bg-red {
  background: red;
}

.bg-green {
  background: green;
}

.p-2 {
  padding: 8px;
}

<div class="flex">
  <div class="bg-red border p-2">
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>
    <p>content-red</p>

  </div>

  <div class="bg-green border p-2">
    <p>content-green</p>
  </div>
</div>

How do I get that working with flexbox?

Nandita Sharma · Accepted Answer · 2018-05-12T13:02:27.807

9

Use align-items: flex-start; on the element of class .flex :

.flex {
  display: flex;
  align-items: flex-start;
}

We need to do this because the default value of align-items is stretch which make child elements take same height.

edited May 12 '18 at 13:02

answered May 12 '18 at 12:49

Nandita Sharma

13,287
2
22
35

Wow thanks, but why is that? – Jenssen May 12 '18 at 12:50
2

@Jenssen because the default value of align-items is stretch – Temani Afif May 12 '18 at 12:53
https://www.w3schools.com/cssref/css3_pr_align-items.asp – Nandita Sharma May 12 '18 at 12:55
@Jenssen Please upvote the answer if it worked for you :) – Nandita Sharma May 12 '18 at 12:56
better add the explanation of the *why* within the answer – Temani Afif May 12 '18 at 13:01
@TemaniAfif Done – Nandita Sharma May 12 '18 at 13:02

patelarpan · Answer 2 · 2018-05-12T13:31:26.947

1

add height:100% to green box

.flex {
  display: flex;
}

.border {
  border: 2px solid black;
}

.bg-red {
  background: red;
}

.bg-green {
  background: green;
  height: 100%;
}

.p-2 {
   padding: 8px;
 }

<div class="flex">
   <div class="bg-red border p-2">
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>
      <p>content-red</p>

   </div>
   
   <div class="bg-green border p-2">
      <p>content-green</p>
   </div>
</div>

edited May 12 '18 at 13:31

answered May 12 '18 at 12:51

patelarpan

7,188
2
20
25

Thanks, working both! – Jenssen May 12 '18 at 12:53
@Jenssen i don't agree with this solution as by adding height:100% you create another issue thus the height will be auto and you have the needed result ... is it logic for you that adding height:100% will decrease the height? – Temani Afif May 12 '18 at 12:54
@Zuber check this : https://caniuse.com/#search=min-content – Temani Afif May 12 '18 at 13:02
already checked @TemaniAfif – Zuber May 12 '18 at 13:04
@Zuber so I guess you noticed that it's working only on chrome ;) – Temani Afif May 12 '18 at 13:06
yes it is :( @TemaniAfif i should remove my edit – Zuber May 12 '18 at 13:07

Flexbox 2 divs different height

2 Answers2