2 个 Div 垂直平均分割并使用容器的高度

Question

如何使 2 个图像填充高度等于子高度的容器的高度

.photo-main

。

.container

元素必须保持在

.photo-main

的高度。

.container {
  display: flex;
}

.photo-main {
  height: 200px;
}

.photos-vert {
  display: flex;
  flex-direction: column;
}

.photos-vert img {
  height: 50%;
}

https://codesandbox.io/p/sandbox/klc5v6?file=%2Fstyles.css%3A15%2C15

我尝试将图像的高度设置为 50%，但它们扩展了容器的高度，而不是仅仅填充

.photo-main

50/50 的高度。

Answer 1

使用flex时，应该使用flex-grow来控制容器空间分配。

您可以尝试以下CSS：

.container {
   display: flex;
 }

.photo-main {
   flex-grow:2 1;
 }

.photos-vert {
   display: flex;
   flex-direction: column;
 }

.photos-vert img {
    flex-grow:1 1;
 }