html - 将图像高度缩放到 Flex-Grown Wrapper

Question

我正在做一些 flex-grid 并且在获取内联图像以缩放其尺寸以匹配 flex-grown 框的高度时遇到问题。

我有一个 flexbox 列，其中有一个标题和一个包装器，它将增长到剩余的任何空间。包装器内部是我希望所有图像都具有相同高度并内联的图像列表。无论我做什么，图像最终都会出现在标题的右侧，并且超出了弹性框的尺寸。任何帮助，将不胜感激。我想要的和我目前得到的包括不好的图画

小提琴链接：https ://jsfiddle.net/oan5fmtb/1/

<div class="container">
  <h4>Title</h4>
  <div class="imgs">
    <img src="..." class="img">
    <img src="..." class="img">
    <img src="..." class="img">
    <img src="..." class="img">
    ...
  </div>
</div>

.container {
  height: 170px;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.imgs {
  flex: 1;
  /* Not sure if I need anything else here */
}

.img {
  display: inline;
  /* Not sure what to do */
}

Answer 1

请试试这个，

.container {height: 170px;width: 100%;border: 1px solid black;}

.imgs {display: flex;}

.img{width:60px;height:60px;margin-right: 10px;}

它按预期工作

Answer 2

由于这个答案找到了解决方案。

<div class="container">
  <h4>Title</h4>
  <div class="imgs">
    <img src="..." class="img">
    <img src="..." class="img">
  </div>
</div>

.container {
  height: 170px;
  width: 100%;

  display: flex;
  flex-direction: column;

  border: 1px solid black;
}

.imgs {
  flex: 1;
  min-height: 0;

  border: 1px solid red;
}

.img {
  height: 100%;
  width: auto;
}

我发现弹性项目不能缩小到小于其内容的大小，min-height: 0将解决此问题。