Html 如何在Flexbox中禁用等高列？

我有三个元素要在布局中对齐

首先，我有一个用于反馈的div，然后是一个搜索输入，然后是一个用于建议的div元素

我希望第一个和最后一个元素的宽度为20%，搜索输入的宽度为60%。使用Flexbox，我实现了我想要的

但是有一个特性将所有div扩展到最高元素。这意味着当搜索结果弹出时，反馈和建议元素的高度会随着搜索div的增加而增加，从而导致布局混乱

有没有一个技巧可以让div不增长到元素最高的值？只需让div（

#反馈

和

#建议

）具有内容的高度就可以了

容器添加电影{
显示器：flex；
}
#容器添加电影反馈{
宽度：20%；
背景颜色：绿色；
}
#容器添加电影搜索{
宽度：60%；
背景色：红色；
}
#容器添加电影建议{
宽度：20%；
背景颜色：黄色；
}

反馈
搜寻

搜寻

搜寻

搜寻

搜寻

搜寻

搜寻

搜寻

搜寻

搜寻


建议

您可以将

对齐项目：flex start

添加到您的

#container_add_movies

。下面是您遇到的flex等高柱功能

flex容器的初始设置是

align items:stretch

这意味着弹性项会自动扩展容器横轴的全长。在行方向容器中，横轴垂直（高度）

最高的项目设置所有同级的高度。随着最高项目的扩展，其兄弟项目也随之扩展。因此，所有项目的高度相同

要覆盖此默认设置，请将

align items:flex start

添加到flex容器：

容器添加电影{
显示器：flex；
调整项目：灵活启动；
}

容器添加电影{
显示器：flex；
对齐项目：flex start；/*新建*/
}
#容器添加电影反馈{
宽度：20%；
背景颜色：绿色；
显示：块；
}
#容器添加电影搜索{
宽度：60%；
背景色：红色；
}
#容器添加电影建议{
宽度：20%；
背景颜色：黄色；
}

反馈
搜索
搜索
搜索
搜索
搜索
搜索
搜索

搜索
搜索
搜索
搜索
搜索

建议

将导致问题的子元素设置为

flex:none

对我起了作用