How to disable equal height columns in Flexbox?

Question

I have three elements I'm trying to align in my layout.

First, I have a div for feedback, and then a search input, and then a div element for suggestions.

I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.

But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.

Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?

http://codepen.io/alucardu/pen/PPjRzY

Answer 1

You're encountering the flex equal height columns feature.

An initial setting of a flex container is align-items: stretch.

This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).

The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.

To override this default setting, add align-items: flex-start to the flex container:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

... or align-self: flex-start to the flex items:

#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}

#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-items sets the default value of align-self. With align-self you can override the default on individual items.

More details in the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction.

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items.

align-self allows this default alignment to be overridden for individual flex items.

---

A bit of history

Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:

1. How to center things, especially vertically, and
2. How to create equal height columns (tables aside)

Today, with the advent of flexbox, these problems are over.

Centering things has never been easier:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

Simple. Easy. Efficient. The craziness is over.

In terms of equal height columns, flexbox also excels: It does this by default.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.

From one popular answer for equal height columns:

Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.

Now that's a hack!

The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.