css - 内联 block 不调整子图像的宽度

Question

我有一个水平滚动的容器，其中包含多个内联 block div，每个包含一个图像。图像设置为高度:100% 和宽度:自动。问题是行内 block 没有占据图像的宽度。他们似乎使用的是原生图像宽度而不是渲染宽度。

.container {height:300px; overflow:auto; white-space:nowrap;}
.container div {display:inline-block; height:100%;}
img {height:100%; width:auto;}

<div class="container">
  <div>
    <img src="example.jpg"/>
  </div>
  <div>
    <img src="example.jpg"/>
  </div>
</div>

https://jsfiddle.net/8mL0yx56/3/

整个事情都在一个 flex 元素中，这似乎是造成它的原因。有什么办法可以阻止这种情况？

Answer 1

.flex-item {height:100%;}

它可以解决你的问题。

你设置了.container {height:100%;}，但是它的父亲.flex-item没有高度。