142

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>

1

6 Answers 6

227

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>

4
  • 9
    Note you can also do 'align-items: flex-start' on parent element to prevent all children from growing - needed in my case. Apr 16, 2018 at 17:40
  • 8
    align-items: center, baseline, flex-start, flex-end are working as well
    – ViES
    Nov 23, 2018 at 18:36
  • 4
    This is necessary because the default value for align-items is stretch.
    – DylanReile
    Jun 6, 2019 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, 2021 at 1:44
77

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>

25

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

That's all

2
  • 11
    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. Mar 25, 2020 at 15:54
  • 1
    Yes, but that would align all items to the top
    – Aaron
    Aug 31, 2021 at 13:42
4

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>

0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.