调整弹性项目的大小以适应容器（防止项目溢出）答案

【问题标题】：Resize flex items to fit container (prevent items from overflowing)调整弹性项目的大小以适应容器（防止项目溢出）
【发布时间】：2021-02-24 00:31:10
【问题描述】：

我一直在努力解决一个我认为会有一个非常简单的解决方案的问题，但我现在看不到它。我有一个嵌套的 flexbox 布局。 flex 项目的第一级是 div，它们本身是 display:flex，根据类，它们可以有一个 flex-directon: 行或列。这些嵌套的弹性项目的第一层和第二层都应该增长以填满剩余的父大小，并在添加新元素时缩小，永远不会溢出。

我的问题：将新的弹性项目添加到“第一级”时，这似乎工作正常。但是，向第二层添加新的 flex 项似乎总是会溢出父容器的高度。

因为我不太擅长描述这样的东西，所以这是我需要的图片：紫色框是父容器（不是 flex）橙色框是带有 flex-direction: 行的 flex 容器，红线是它的 flex 项（每个项也是一个 flexbox）。蓝线是嵌套的弹性项目。

Nested Flexbox layout

添加新的红色项目可以根据需要扩展或缩小，但添加新的蓝色项目会溢出容器。 https://jsfiddle.net/t40x7or8/

这是我的代码示例： CSS

  width: 1800px;
  height: 500px;
  border: 4px blue solid;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flex-item {
  flex-grow: 1;
  flex-basis: 0;

  display: flex;
}

.flex-item > div {
  flex-grow: 1;
  border: 1px solid orange;
}

.height-1 {
  flex-direction: column;
  max-height: 100%;
}

.height-2 {
  max-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

  <div class="flex-container">

    <div class="height-2 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/600" />
      </div>
    </div>

    <div class="height-1 flex-item">
      <div class="img-div">
        <img src="https://picsum.photos/1080/601" />
      </div>
      <div class="img-div">
        <img src="https://picsum.photos/1080/602" />
      </div>

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

抱歉，描述混乱，我不擅长这类事情。感谢您的帮助

【问题讨论】：

我已经删除了以前的答案并添加了一个新答案，它应该解决这个问题中的问题:)
嗨，你有没有检查过我更新的答案？它解决了你的问题吗？

标签： html css flexbox

【解决方案1】：

我认为我们应该使用flex: 1 1 0 来修复弹性项目的布局。

并使用width: 100%来控制内图的大小。

https://jsfiddle.net/ramseyfeng/kxf46bju/

.page {
  border: 3px solid green;
  width: 600px;
  height: 300px;
}

.flex {
  display: flex;
}

.cols {
  display: flex;
  flex-direction: row;
}

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

.flex-1-1-0 {
  flex: 1 1 0;
  
}

.img-div {
  flex: 1 1 0;
  display: flex;
}

.img-div img {
  width: 100%;
}

<div class="page cols">
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/600" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/601" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/1080/602" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/607" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/1080/608" />
    </div>
  </div>
  <div class="flex-1-1-0 rows">
    <div class="img-div">
      <img src="https://picsum.photos/1080/605" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/2000/1000" />
    </div>
    <div class="img-div">
      <img src="https://picsum.photos/2000/1001" />
    </div>
  </div>
</div>

【讨论】：