Prevent FlexChild from growing

Question

Given the following code:

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
}

.right-container {
  flex: 0 1 auto;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

The right container will grow to be 300px high, despite the flex-grow property being set to 0. How do I prevent this from happening? I.E., I want the right container to only be as tall as its content.

Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo

you are mixing main and cross axis. The flex grow apply to the main axis (so will affect the widh) and not the cross axis (will not affect the height) — Temani Afif, Nov 19 '18 at 19:28
`flex-grow` has nothing to do with your problem. Check the duplicates for explanations. — Michael Benjamin, Nov 20 '18 at 00:09

ksav · Accepted Answer · 2018-11-19T18:57:40.183

Add align-self: flex-start on the .right-container

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
  border: 1px solid blue;
}

.right-container {
  align-self: flex-start;
  border: 1px solid red;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

Note: flex-grow, flex-shrink and flex-basis are for controlling how the space is filled along the main axis. In this case, the main axis is left-right because the flex-direction is set to row by default.

The align-items property will align the items on the cross axis. The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default.

MDN - Concepts of Flexbox

That is why you need to override either align-items on your .outer-container or align-self to the flex children.

Prevent FlexChild from growing

1 Answers1