Kris Jones Kris Jones - 4 months ago 7
CSS Question

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

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.

Answer

You need to add align-self: flex-start; to the inside flex boxes.

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.

Comments