内联块不调整宽度到子图像

Question

我有一个水平滚动容器，里面有几个内联块div，每个div包含一个图像。图像设置为高度：100％和宽度：自动。问题是内联块不占用图像的宽度。它们似乎使用原始图像宽度而不是渲染宽度。

.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/

整个事情都在一个弹性项目中，这似乎是导致它的原因。有什么方法可以阻止它吗？

Answer 1

.flex-item {height:100%;}

它可以解决你的问题。

您设置.container {height:100%;}，但其父亲.flex-item没有身高。