Flexbox item 的高度由另一个 flex item 的高度决定

问题描述

我有一个没有固定高度的容器，当前设置为 display:flex 和 align-items:stretch 它包含 2 个项目，并且都包含在其中的内容。第一个包含多个元素，第二个只包含一个图像。

我希望包含图像的项目的高度受其他项目的高度支配。使用 align-items-stretch 确保它总是拉伸以匹配如果第一个项目更大。但是，如果第一个项目较小，我也需要它进行裁剪。我该怎么做？

.flex-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    .multi-container {
        flex-grow: 1;
    }
    .image-container {
        max-width: 60px !important;
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexbox vertical-alignment