时间戳

首页 > 解决方案 > 如何使用 flexbox 填充容器的剩余高度？

html - 如何使用 flexbox 填充容器的剩余高度？

问题描述

我想div填充父容器的剩余高度。我知道周围还有许多其他类似的问题flexbox，这个问题的常见解决方案是使用面向列的flexbox包装器围绕增长以填充高度的内容。这对我不起作用。在下图中，我试图让绿色和粉红色内容的容器用红色边框填充父容器的剩余高度。

.container {
  width: 600px;
  height: calc(100vh - 100px);
  border: 1px solid red;
}

.something-before {
  background: lightblue;
  height: 50px;
  margin: 10px 0;
}

.text-wrap {
  display: flex;
  flex-direction: column;
}

.text-wrap>div {
  flex-grow: 1;
}

.text-content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.text-left {
  width: 100px;
  background: green;
  height: 100%;
}

.text-right {
  background: pink;
  flex-grow: 1;
  height: 100%;
}
<div class="container">
  <div class="something-before"></div>
  <div class="text-wrap">
    <div>
      <div class="text-content">
        <div class="text-left">
          Text<br />Text<br />Text<br />
        </div>
        <div class="text-right">
          Text<br />Text<br />Text<br />
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcsslayoutflexbox

解决方案

display: flex并且flex-direction: column需要穿.container不上.text-wrap。你甚至不需要后者。然后，如果您戴上flex-grow: 1它.text-content，它将按预期工作：

.container {
  width: 600px;
  height: calc(100vh - 100px);
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
.something-before {
  background: lightblue;
  height: 50px;
  margin: 10px 0;
}
.text-content {
  display: flex;
  flex-grow: 1;
}
.text-left {
  width: 100px;
  background: green;
}
.text-right {
  background: pink;
  flex-grow: 1;
}
<div class="container">
  <div class="something-before"></div>
  <div class="text-content">
    <div class="text-left">
      Text<br />Text<br />Text<br />
    </div>
    <div class="text-right">
      Text<br />Text<br />Text<br />
    </div>
  </div>
</div>

推荐阅读