flexbox 容器不会拉伸 100% 高度
Posted
技术标签:
【中文标题】flexbox 容器不会拉伸 100% 高度【英文标题】：flexbox container does not stretch 100% height 【发布时间】：2018-10-14 16:27:33 【问题描述】：我有以下 html 和 css： HTML：
<body style="height:100%;">
<div class="fb-container">
<div class"somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
CSS：
.fb-container
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
// min-height: 100%;
.somedatadiv
width: 75%;
max-width: 345px;
backround: grey;
padding: 30px;
由于某种原因，flex 容器 div 没有拉伸 100% 的身体高度。
（我使用的浏览器是这个“演示/应用程序/站点”的 chrome）
【问题讨论】：
来自 OP 的回答如下：“MCV 模板中有一些代码错位。这弄乱了样式/布局。这篇文章与其他用户无关，因此将被删除/已删除。更新：无法删除此帖子：". 【参考方案1】：您需要将display:flex添加到父标签，然后将flex:1添加到子标签，以使子标签可以扩展到父标签的100%。
.fb-container
background-color:green;
flex: 1;
.somedatadiv
width: 75%;
max-width: 345px;
background-color: grey;
padding: 30px;
<body style="height:100vh;display:flex;">
<div class="fb-container">
<div class="somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>【讨论】：
这里也一样，谢谢，但数据 div 不再是 345 px 宽度了。它小于我在 css 中声明的值 您已声明最大宽度。如果您希望 div 最小为 345px，则需要明智地声明它。 75% 宽度，最大 345px；在全高清屏幕上，这不是问题。它在更改之前起作用。为什么它不再起作用了。出了点问题，我将 flex 属性放在 body 上 感谢您的更新。 mvc tempate 中有一些东西。我以为这是我的更新，但模板中已经出错了。我将删除此帖子。因为它与其他用户无关【参考方案2】：添加它，它应该可以工作。演示：https://jsfiddle.net/jacobgoh101/svtewj9j/
html,
body
height: 100%;
body
display: flex;
更新：如果您希望 fb 容器保持全宽
将flex: 1 1 100%; 添加到它
.fb-container
flex: 1 1 100%;
更新：完整解决方案https://jsfiddle.net/jacobgoh101/svtewj9j/2/
html,
body
height: 100%;
body
display: flex;
.fb-container
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
flex: 1 1 100%;
.somedatadiv
flex: 1 1 75%;
max-width: 345px;
backround: grey;
padding: 30px;
box-sizing: border-box;
【讨论】：
谢谢，它适用于高度，但我的宽度会被切掉。数据 div 不再是 345px。【参考方案3】：MCV 模板中有一些代码错位。 那搞乱了样式/布局。 此帖子与其他用户无关，因此将被删除/删除
更新：无法删除此帖子：
【讨论】：
以上是关于flexbox 容器不会拉伸 100% 高度的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 不尊重我的最小高度：100% 使用 flexbox
React Bootstrap flexbox 不会拉伸到内容高度
Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]