您遇到了flex等高列功能。
flex容器的初始设置为
align-items: stretch。
这意味着弹性项目会自动扩展容器横轴的整个长度。在行方向的容器中，横轴是垂直的（高度）。
最高的项目设置所有兄弟姐妹的身高。随着最高项目的扩展，其兄弟姐妹也随之而来。因此，所有物品的高度相等。
要覆盖此默认设置，请添加
align-items: flex-start到flex容器中：
#container_add_movies { display: flex; align-items: flex-start;}#container_add_movies { display: flex; align-items: flex-start; }#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>…或
align-self: flex-start弹性项目：
#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; width: 20%; background-color: green;}#suggestions { align-self: flex-start; 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设置的默认值
align-self。使用
align-self可以覆盖单个项目的默认设置。
规格中的更多细节：
8.3。 跨轴对齐：align-items
和align-self
属性
伸缩项可以在伸缩容器的当前行的横轴上对齐，类似于
justify-content但在垂直方向上。
align-items为所有flex容器的项目（包括匿名flex项目）设置默认对齐方式。
align-self允许针对单个弹性项目覆盖此默认对齐方式。
一点历史
自CSS诞生以来，存在两个经常使前端开发人员感到沮丧，困惑和烦恼的布局挑战：
- 如何使事物居中，尤其是垂直居中
- 如何创建等高列（旁边有桌子）
如今，随着flexbox的出现，这些问题已经结束。
使事情居中从未如此简单：
#container { display: flex; justify-content: center; align-items: center; }就等高列而言，flexbox也很出色：默认情况下会这样做。
#container { display: flex; flex-direction: row; align-items: stretch; }该
align-items:stretch规则告诉弹性项目尽可能沿横轴扩展。因此，在行方向容器中，所有项目的高度可以相等。
给
overflow: hidden容器加上大（且相等）的负边距，并给列填充正数。请注意，此方法存在一些问题，例如锚链接在您的布局中不起作用。
现在是骇客！
钟摆现在开始以另一种方式摆动： 设计师正在询问如何关闭等高柱。
