如何禁用Flexbox中的等高列？

Question

如何禁用Flexbox中的等高列？我有三个元素，我试图在我的布局中对齐。首先，我有一个div作为反馈，然后一个搜索输入，然后一个div元素用于建议。我希望第一个和最后一个元素的宽度为20%，搜索输入的宽度为60%。使用Flexbox，我实现了我想要的。但是有一个特性可以把所有的div都扩展到最高的元素..这意味着当搜索结果弹出时，反馈和建议元素随着搜索div的高度增加而导致布局混乱。有没有一种不去生长元素最高的div的诡计？做个div就行了(#feedback和#suggestions)它们中的内容有多高？#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 1

将导致问题的子元素设置为flex:none为我做了个小把戏。