Peter Boomsma Peter Boomsma - 7 months ago 50
HTML Question

How to disable equal height columns in Flexbox

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 wanted, but there's a feature that grows all the divs to the highest element. Which 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?




#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#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>





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

Answer

You can add align-items: flex-start to your #container_add_movies. Here's an example