How to prevent flexbox from being equal height with the flexbox next to it?

Question

I have on large flex container. Inside there are two flex containers. In each of those there several lines of list items. The problem is that the one with fewer items is getting stretched to match the height of the other one, so there is too much space between elements.

Possible duplicate: [How to disable equal height columns in Flexbox?](http://stackoverflow.com/q/33034660/3597276) — Michael Benjamin, Aug 01 '16 at 19:08

score 0 · Accepted Answer · edited Sep 27 '17 at 00:01

You need to add align-self: flex-start; to the inside flex boxes. This overrules the default value align-self: stretch;

Here is an example:

#outsideFlexBox {
  display: flex;
}

.insideFlexBox {
  display: flex;
  align-self: flex-start;
  margin: 10px;
  padding: 10px;
  background-color: #33FFCC;
}

<div id="outsideFlexBox">
  <div class="insideFlexBox">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="insideFlexBox">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Hope this helped.

How to prevent flexbox from being equal height with the flexbox next to it?

1 Answers1