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

Question

我想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>

Answer 1

只需在.text-wrap

中添加height:100%

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

没有这个，text-wrap只占用其内容所需的space。

Answer 2

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>

Answer 3

为 class .container 添加 灵活性 规则。像这样。

.container {
    display: flex;
    flex-direction: column;
    ...
}

并为 .text-wrap 添加 flex: 1 规则，这会将您的 div 拉伸到最大高度。像这样：

.text-wrap {
    ...
    flex: 1;
}

.container {
    display: flex;
    flex-direction: column;
    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;
    flex: 1;
}

.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>

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

How to fill remaining height of container using flexbox?

html

css

layout

flexbox