CODEWITHSUNDEEP
htmlcssflexbox
Tom Oakley
Tom Oakley

Reputation: 6403

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

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>

Upvotes: 156

Views: 150945

Answers (6)

Grifo
Grifo

Reputation: 29

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.

Upvotes: 1

Bogdans
Bogdans

Reputation: 169

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

Upvotes: 0

Sergiu Cebotaru
Sergiu Cebotaru

Reputation: 311

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

That's all

Upvotes: 27

Erik Mart&#237;n Jord&#225;n
Erik Mart&#237;n Jord&#225;n

Reputation: 4853

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>

Upvotes: 5

misterManSam
misterManSam

Reputation: 24692

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>

Upvotes: 79

Aaron
Aaron

Reputation: 10430

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>

Upvotes: 243

Related Questions