Flexbox内的图像高度无法在Chrome中运行

Question

我有一个div使用flexbox来集中它的项目.在这里div我有3个元素,其中一个是图像.

<div id="flex-container">
    <div id="container1"></div>
    <img src="#" alt="">
    <div id="container2"></div>
</div>

#container1并且#container2有自己的高度,img应该使用里面的剩余高度#flex-container.

此代码段适用于Firefox,但在Chrome中不起作用.(jsfiddle)

#flex-container{
  height: 300px;
  width: 500px;
  display: flex;
  display: -webkit-flex;
  flex-flow: column nowrap;
  -webkit-flex-flow: column nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 5px solid black;
}

#container1, #container2{
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

Chrome需要-webkit-flexbox的前缀,但问题似乎并非如此.

可能发生什么？是浏览器错误还是我忘记了什么？

Answer 1

您需要克服两个问题:

Firefox自己解决了这两个问题,但Chrome需要帮助.

问题#1

第一个问题是默认情况下,弹性项目不能小于其内容.弹性项目的初始设置是min-height: auto.

因此,具有替换元素的弹性项(如图像)将默认为图像的固有大小.除非您覆盖初始设置(使用min-height: 0),否则不能缩小项目.

#flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>

可以在此处找到有关此问题的完整说明:

• 为什么flex项目不会缩小内容大小？

问题#2

然后你遇到了第二个问题:保持纵横比.这是flex容器中的常见问题.一种选择是为图像定义高度:

#flex-container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border: 5px solid black;
}
#container1, #container2 {
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */

<div id="flex-container">

  <div id="container1">300x100 px</div>

  <img src="http://i.imgur.com/RRUe0Mo.png" alt="">

  <div id="container2">300x100 px</div>

</div>