如何禁用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为我做了个小把戏。