如何使水平溢出容器的子元素高度与最长子元素保持一致？

原来的inline-block + height:100%方案不生效，是因为父元素高度由内容撑开，而inline-block元素的height:100%需要父元素有明确高度值才能继承。改用Flexbox可以轻松实现所有子元素与最长元素等高，同时支持水平滚动。

修改后的代码 #

CSS #

body {
    
}
section{
    width: 300px;
    background: lightblue;
    overflow-x: auto; /* 开启水平滚动 */
    display: flex; /* 启用Flex布局 */
    gap: 10px; /* 控制子元素间距，替代margin更整洁 */
    padding: 5px; /* 保留容器内边距，维持原布局的边缘间距 */
}
div{
    flex: 0 0 auto; /* 子元素不拉伸、不压缩，保持自身宽度 */
    max-width: 150px;
    background: lightgreen;
    white-space: normal;
    /* 无需设置height:100%，Flex默认让所有子元素等高 */
}

HTML #

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
        </section>
    </body>
</html>

关键说明 #

• display: flex：将父容器转为Flex容器后，子元素自动成为Flex项目，默认沿水平方向排列，且所有项目高度会匹配容器高度（容器高度由最高的子元素撑开）。
• overflow-x: auto：当子元素总宽度超出容器宽度时，自动显示水平滚动条。
• flex: 0 0 auto：固定子元素的宽度表现，避免被Flex布局压缩或拉伸，保证max-width生效。

内容的提问来源于stack exchange，提问作者Eagle