Flex容器无法拉伸至100%高度的问题求助

这问题我日常开发中碰到过好多次，核心原因是HTML 和 Body 的高度没有被正确设置为 100%，再加上你代码里还有几个小拼写错误，一起来修正：

第一步：修复代码里的语法错误 #

你的代码里有几处容易忽略的小问题，先把它们修正：

• HTML里的 <div class"somedatadiv"> 缺少了属性赋值的等号，应该改成 <div class="somedatadiv">
• CSS里的 flex-wrap: no-wrap 是无效值，正确的标准写法是 flex-wrap: nowrap
• CSS里的 backround: grey 拼写错误，应该是 background: grey

第二步：设置正确的高度层级 #

默认情况下，html 元素的高度不会自动占满浏览器视口，所以需要给 html 和 body 都设置高度，再让Flex容器继承这个高度：

修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
            padding: 0;
        }

        .fb-container {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            min-height: 100%; /* 让容器至少占满父元素高度，内容超出时自动延伸 */
        }

        .somedatadiv {
            width: 75%;
            max-width: 345px;
            background: grey;
            padding: 30px;
        }

        .anotherdiv {
            background: lightblue; /* 加背景色方便查看拉伸效果 */
            padding: 30px;
            flex: 1; /* 让这个元素填满容器剩余的宽度空间 */
        }
    </style>
</head>
<body>
    <div class="fb-container">
        <div class="somedatadiv"> Some data </div>
        <div class="anotherdiv"> data </div>
    </div>
</body>
</html>

为什么这样能解决问题？ #

• 给 html 和 body 设置 height: 100%，确保它们完全覆盖浏览器视口的高度，同时去掉默认边距避免布局偏移
• .fb-container 的 min-height: 100% 让它至少和父元素（body）一样高，当内容超过视口时还能自动向下延伸
• align-items: stretch 会让Flex子元素自动拉伸，填满容器的高度（前提是子元素没有设置固定高度）

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