flexbox 容器不会拉伸 100% 高度答案

【问题标题】：flexbox container does not stretch 100% heightflexbox 容器不会拉伸 100% 高度
【发布时间】：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 模板中有一些代码错位。这弄乱了样式/布局。这篇文章与其他用户无关，因此将被删除/已删除。更新：无法删除此帖子：".

标签： html css flexbox height

【解决方案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 模板中有一些代码错位。那搞乱了样式/布局。此帖子与其他用户无关，因此将被删除/删除

更新：无法删除此帖子：

【讨论】：