Question

我有以下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和＃34; demo / application / site＆＃34;）

Answer 1

您需要将display:flex添加到父标记，然后将flex:1添加到子项，以使子项扩展到父级的100％。

＆＃13;

.fb-container { 
  background-color:green;
  flex: 1;
  
}
.somedatadiv {
  width: 75%;
  max-width: 345px;
  background-color: grey;
  padding: 30px;
}

＆＃13;

<body style="height:100vh;display:flex;">
  <div class="fb-container">
    <div class="somedatadiv">
      Some data
    </div>
    <div class="anotherdiv">
      data
    </div>
  </div>
</body>

＆＃13;

Answer 2

添加它，它应该工作。演示：https://jsfiddle.net/jacobgoh101/svtewj9j/

html,
body {
  height: 100%;
}

body {
  display: flex;
}

更新：如果您希望fb-container保持全宽

向其添加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;
}

Answer 3

MCV模板中有一些错误放置的代码。这搞乱了风格/布局。此帖子与其他用户无关，因此会被删除/删除

更新：无法删除此帖子：

flexbox容器不会伸展100％的高度

3 个答案: