html - 为什么使用 flex wrap 会破坏包含大图像的元素的高度？

Question

我使用启用了 Flexbox 和 2 个子 div 的容器设置了一个简单的页面。
使用容器的 View 宽度和 View 高度设置大小。
使用 css flex 速记将子 div 设置为 600px 和 400px 宽度。
已将大图像添加到子图像并调整为 100%。
这在 flex-wrap: wrap 之前一直有效在容器上启用。
然后 child 的高度一下子就大了。
有没有办法解决这种行为？
下面是我的代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.flex-item1 {
  flex: 1 1 600px;
  padding: 20px;
  background-color: coral;
}

.flex-item2 {
  flex: 1 1 400px;
  padding: 20px;
  background-color: cornflowerblue;
}

.image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="flex-container">
  <div class="flex-item1">
    <img src="https://picsum.photos/1000/2000" class="image" alt="image" />
  </div>
  <div class="flex-item2">
    <h1>Header 1</h1>
  </div>

Answer 1

只需将此添加到您的代码中:

.flex-item1 {
   height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.flex-item1 {
  flex: 1 1 600px;
  padding: 20px;
  background-color: coral;
  height: 100%; /* new */
}

.flex-item2 {
  flex: 1 1 400px;
  padding: 20px;
  background-color: cornflowerblue;
}

.image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="flex-container">
  <div class="flex-item1">
    <img src="https://picsum.photos/1000/2000" class="image" alt="image" />
  </div>
  <div class="flex-item2">
    <h1>Header 1</h1>
  </div>

使用单行 flex 容器 ( flex-wrap: nowrap )， height: 100%容器上的 height: 100% 识别在图像上(向下 2 级)。
使用多行 flex 容器 ( flex-wrap: wrap )， height: 100%容器上的内容不是由图像继承的。百分比高度链断裂。所以你需要添加 height: 100%到中间链接( flex 元素)，布局在这两种情况下都可以工作。
不完全确定为什么会发生这种情况。不得不研究一下。