Using flexbox to get equal height rows, not columns

Question

I'm new at using flex in a stylesheet.

I am attempting to force two block level elements to be the same height.

Here is the fiddle: https://jsfiddle.net/r9pwzonx/

.flex {
  display: flex;
  flex-direction: column;
}
.first {
  padding: 1em;
  background: blue;
  flex: 1;
}
.second {
  padding: 1em;
  background: red;
  flex: 1;
}

<div class="flex">
    <div class="first">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    </div>

    <div class="second">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minus aliquam assumenda consequuntur, laboriosam ducimus ad quis omnis, molestiae a iure nesciunt voluptate rem libero accusantium, deleniti, porro nemo excepturi?</p>
    </div>
</div>

I do not see any change in the height of the smaller box to match the height of the larger box.

when you have flex in `flex-direction: column`, the heights of stacked elements aren't guaranteed to be the same. — Jason, Apr 12 '16 at 00:17
Use `min-height: 0; flex: 1 1 0` (the later only needed for browsers which follow an old standard) and the heights will become equal indeed... but 0. Flexbox doesn't work like "change the height of the smaller box to match the height of the larger box". — Oriol, Apr 12 '16 at 00:25
Flexbox does not offer equal height columns/rows in a multi-line flex container. This behavior is defined in the spec: http://stackoverflow.com/q/36004926/3597276 — Michael Benjamin, Apr 12 '16 at 02:06

score 3 · Accepted Answer · answered Apr 12 '16 at 00:31

I do not see any change in the height of the smaller box to match the height of the larger box.

You cannot do that in a flex box with that flex-direction: columnbecause that the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept.A flex container expands items to fill available free space, or shrinks them to prevent overflow.
If you give row a fixed height , I believe this should work as you expect. If you're not trying to use fixed height.It depends on the the things that inside on that flexboxes.

CODEPEN WITH LINE-HEIGHT

CODEPEN WITH FIXED-HEIGHT

Using flexbox to get equal height rows, not columns

1 Answers1