Prevent a flex items height from expanding to match other flex items

Question

I have two elements inside a container, which are being side-by-side by using flex box. On the second element (.flexbox-2), I am setting it's height in the CSS. However, then the first element (.flexbox-1) will match the height of .flexbox-2. How would I stop .flexbox-1 from matching the height of .flexbox-2, and instead just retain its natural height?

Here is what I have so far (also available as a jsFiddle)

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

related: [**How to disable equal height columns in Flexbox?**](http://stackoverflow.com/q/33034660/3597276) — Michael Benjamin, Mar 02 '17 at 05:02

score 218 · Answer 1 · answered Oct 20 '16 at 13:51

218

I know this is an old question but a better solution is to set the flex item to align to the top using flex-start.

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

answered Oct 20 '16 at 13:51

Aaron

10,187
3
23
39

8

Note you can also do 'align-items: flex-start' on parent element to prevent all children from growing - needed in my case. – Daniel Sokolowski Apr 16 '18 at 17:40
8

`align-items: center, baseline, flex-start, flex-end` are working as well – ViES Nov 23 '18 at 18:36
3

This is necessary because the default value for `align-items` is `stretch`. – DylanReile Jun 06 '19 at 21:15
what does the number mean in `flex: 2` ? like an ideal number of items on a row or something? – dcsan Aug 29 '21 at 01:44

score 76 · Accepted Answer · edited Jun 20 '20 at 09:12

This is an old solution. My answer is superseded by this new answer by Aaron using align-self. That is a better solution that does not rely on a CSS quirk.

As long as the flex container has no height itself, you can set height: 0% on the first flex item. Because it has no height to inherit from its parent, any percentage height will cause it to collapse. It will then grow with its contents.

Example

In this example I have removed the -webkit prefix. It's only really required for Safari and the prefix can be added above the non-prefixed version. I also removed flex-direction: row as it is the default value.

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

score 19 · Answer 3 · answered Mar 25 '20 at 14:42

19

You can easily fix that by adding to the parent align-items: flex-start;

That's all

answered Mar 25 '20 at 14:42

Sergiu Cebotaru

231
2
2

10

Welcome to Stack Overflow. When adding an answer to a five year old question with existing answers it is important to explain what new aspect of the question you are addressing and how your answer works and why it should be used. Correct code formatting also really helps as right now you just have bold text in a sentence which doesn't provide context about which css rule to add it to. – Jason Aller Mar 25 '20 at 15:54
Yes, but that would align **all** items to the top – Aaron Aug 31 '21 at 13:42

score 4 · Answer 4 · answered Jul 26 '19 at 09:06

Setting the height of the children to max-content will prevent them to shrink.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

score 0 · Answer 5 · answered Jun 30 '21 at 20:12

Another option is to utilize "col" element and auto-width feature, which works as auto-height feature when flexbox orientation is column. Here's an example with bootstrap 5

<div class="d-flex flex-column">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
</div>

Reference: https://getbootstrap.com/docs/5.0/layout/grid/#equal-width

score 0 · Answer 6 · answered May 22 '23 at 20:13

I wanted to comment on @misterManSam's answer, but I don't have reputation enough.

It worked me well but I had some troubles on Vercel (maybe, I was using node-sass, in another version), setting

height: 0%;

I recommend

height: 100%;

It's exactly the same answer, but it works everywhere.

Prevent a flex items height from expanding to match other flex items

6 Answers6

Example

Linked