flex 1 不会填满可用空间答案

【问题标题】：flex 1 won't fill available spaceflex 1 不会填满可用空间
【发布时间】：2022-01-12 22:43:54
【问题描述】：

flex 1 不会填满可用空间，我不知道为什么？

.container {
      display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 8px 20px rgb(0 0 0 / 8%);
    border-radius: 45px;
    padding: 30px;
    margin-bottom: 40px;
}

.sub-container-one {
  font-size: 100px;
}

.sub-sub-container-two {
    display: flex;
    align-items: center;
    /* this apparently should work but it doesn't */
      flex: 1;
}

<div class="container">
  <div class="sub-container-one">
    ftftftftftftf
  </div>
  <div class="sub-container-two">
    <div class="sub-sub-container-two">
      ghghghghghghghghghghghg
    </div>
  </div>
</div>

Fill remaining vertical space with CSS using display:flex

弹性：1； /* 1 如果没有为其他孩子设置 flex 值，它将填充整个剩余空间*/

div中没有其他孩子

我怎么不能居中sub-sub-container-two？

Flexbox: center horizontally and vertically

我发现了这个问题

它建议使用固定高度，但我不能这样做，因为它需要支持多个条目。

如何让 flex 1 填充可用空间？

【问题讨论】：

“填充可用空间”是什么意思？您想用哪个容器填充哪个空间？

标签： html css flexbox

【解决方案1】：

您的 flex 子节点是 .sub-container-one 和 .sub-container-two，而不是 .sub-sub-container-two，因此您对 .sub-sub-container-two 的所有设置都应应用于 .sub-container-two。水平居中是使用justify-content 完成的，顺便说一句（不是align-items）

.container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 8px 20px rgb(0 0 0 / 8%);
    border-radius: 45px;
    padding: 30px;
    margin-bottom: 40px;
}

.sub-container-one {
  font-size: 100px;
}

.sub-container-two {
    display: flex;
    justify-content: center;
    flex: 1;
}

<div class="container">
  <div class="sub-container-one">
    ftftftftftftf
  </div>
  <div class="sub-container-two">
    <div class="sub-sub-container-two">
      ghghghghghghghghghghghg
    </div>
  </div>
</div>

另请注意，如果您允许项目增长并填充可用宽度，您的容器设置 align-items: flex-start; 和 justify-content: space-between; 将无效。

【讨论】：