使用 flex-wrap 的 flex box 没有得到完整的高度答案

【问题标题】：flex box not getting full height with flex-wrap使用 flex-wrap 的 flex box 没有得到完整的高度
【发布时间】：2020-07-25 22:34:21
【问题描述】：

我在下面创建了一个简单的 JSFiddle。为什么我的粉色盒子 (.screen) 没有长到红色和蓝色盒子的全高？

我尝试在screen div 上设置height: 100%，但这使它从.inner-container 中生长出来，并将其置于.bottom 之上。

编辑我在将.screen 放在.inner-container 之外有一个问题，我忘了说。当页面第一次初始化时，.screen 将有一个display:none，因为用户还没有开始屏幕共享。当用户点击按钮分享他的屏幕时，我会将.subscriber 设置为width: 10rem 并显示.screen。通过仅使用宽度，我可以将订阅者容器从中间“移动”到顶部。

编辑 2 要更多地展示我的目标，您可以从 .screen 中删除 flex: 0 1 100% 并添加 width: 100%; height: calc(100% - 10.5rem);。这感觉就像我应该能够使用 flex 但也许不能。

解决方案 我最终将.screen 移动到.inner-container 之外，并且我在.inner-container 上动态切换row 和column 之间的flex-direction 以获得所需的结果。请参阅@vals 回答，了解为什么现在无法使用 flex-box。

这里是 JSFiddle：https://jsfiddle.net/kejq01s2/2/

.outer-container {
  height: 100vh;
  background: yellow;
  display: flex;
  flex-direction: column;
}

.inner-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.publisher {
  width: 10rem;
  height: 10rem;
  background: red;
  margin: .5rem;
}

.subscriber {
  width: 10rem;
  height: 10rem;
  background: blue;
  margin: .5rem;
}

.screen {
  background: pink;
  flex: 0 1 100%;
}

.bottom {
  width: 100%;
  height: 6rem;
  background: green;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="publisher"></div>
    <div class="subscriber"></div>
    <div class="screen"></div>
  </div>
  <div class="bottom"></div>
</div>

【问题讨论】：

您需要将屏幕制作在内容器之外
@TemaniAfif 我已经更新了我的问题。需要在 .inner-container 中包含所有三个 div，这样我就可以在对象周围动态移动。
你没有考虑到align-content: stretch 的影响，这是弹性容器的默认设置。有关说明，请参阅重复的帖子。
另外，给粉色项设置一个高度，因为没有高度和内容，它可以缩小到0高度。
@Michael_B 据我了解，我添加了一个解释问题所在的答案

标签： css flexbox

【解决方案1】：

这不是向您展示如何实现这一目标的答案，而是对正在发生的事情以及为什么您无法获得想要的东西的解释。

因为 flex-direction 是 row，所以高度是 cross-axis。您可以使用 2 种样式控制此尺寸，align-items 和 align-content

如果您将 align-items 设置为 stretch，则项目将增长...直到它们达到 flex-line 高度。（flex 容器将项目设置成行，即使这些项目不可见）。

如果您将 align-content 设置为 stretch，则 flex-lines 将增长以填充容器中的所有可用空间。

现在，在您的布局中，screen 没有高度。因此，当 flex-lines 被标注尺寸时，第一行的高度约为 11em ，即发布者高度。第二行的高度为 0。将 align-content 设置为拉伸将使 flex-line 增长，直到它们填满容器中的所有可用空间。

但是，多余的空间将平均分配在第一行和第二行之间。因此，第二行无法增长以适应第一行的感知高度。

您可以将 screen 元素设置为单独增长，这是使用 align-self 的 align-items 的变体来完成的，这个是设置在子元素而不是父元素上，所以它是选择性的。但是，你没有属性来决定哪条 flex-line 增长，所以你运气不好。

也许你可以让这个布局与 css-grids 一起工作，但我不知道你的案例的所有要求来确定这一点。

【讨论】：