如何使 child 在 flex 中填充 parent 的所有可用高度

Question

我有两个 div，Parent 和 Child。

我需要让 Child 填充 Parent 的所有可用高度。

但出于某种原因，我在底部有这个填充。

只有当我使用Child

的高度105%时才能删除它

但这显然不是最好的解决方案。

我尝试使用 align-items: stretch，但没有任何效果。

<div 
  style={{
    width: 100%;
  height: 92%;
  display: flex;
  flex-direction: row;
  box-sizing: content-box;
  }}
>
  <div
    style={{
      height: '100%',
      backgroundColor:'red',
    }}
  >
  </div>
</div>

Answer 1

父容器的宽度或高度需要为specific/absolute。所以不是将父级的高度设置为 92%，你可以尝试 92 vh.

<div 
      style={{
        width: 100%;
        height: 92vh;
        display: flex;
        flex-direction: row;
        box-sizing: content-box;
      }}
    >
      <div
        style={{
          height: '100%',
          backgroundColor:'red',
        }}
      >
      abc
      </div>
    </div>

Answer 2

在弹性项目上使用 flex-basis: 100%;。

html,
body {
  margin: 0;
  height: 100%;
}

body>div:first-child {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: content-box;
}

div>div {
  flex-basis: 100%;
  background-color: red;
}

<div>
  <div>foo</div>
</div>

您可以从下面的第二个示例中看出，尽管有静态或动态大小的父级，它仍然有效。

body>div:first-child {
  width: 800px;
  height: 400px;
  display: flex;
  flex-direction: row;
  box-sizing: content-box;
}

div>div {
  flex-basis: 100%;
  background-color: red;
}

<div>
  <div>foo</div>
</div>

Answer 3

这里已经列出了一些基础知识。为了便于阅读，我也对它进行了一些重新格式化。您将 background-color 作为背景颜色，以及 100% 到“100%”。

如果以此为基础，把它的宽和高改成100%应该没有问题。较大的变化是设置位置，并确保设置高度和宽度。

<body style="position: absolute; padding: 0; margin: 0; width: 100vw; height: 100vh; background-color: aquamarine; display: flex; justify-content: center;">

 <div style="
    position: relative;
    width: 70%; 
    height: 70%;  
    align-self: center;
    box-sizing: content-box;
    border: 2px solid grey;
    background-color: aliceblue;
    display: flex;
    justify-content: center;">
    <div style = "
        position:relative;
        align-self: center;
        height: 80%; 
        width: 80%;
        background-color: red;">
    </div>
 </div>
</body>

我还为正文添加了一些样式，以帮助理解正在发生的事情。

如何使 child 在 flex 中填充 parent 的所有可用高度

How to make child fill all avaliable height of parent in flex

html

css

flexbox