<p> 增长时缩小 <img> 并使用 flex-box 保持纵横比

Question

我有一个静态高度容器。

在里面我有一个div 元素，里面有一个img 元素。

下面有一个p标签，它是动态填充文本的。

当文本较长且p 标签变大时，我希望上面的图像缩小以在容器内腾出空间。

我一直在尝试使用flex 和flex-shrink 来做到这一点。这就是我所拥有的：

http://codepen.io/niper1/pen/yaBxvx

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main div {
  flex-shrink: 3;
}
img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
p {
  flex-shrink: 0;
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

如您所见，img 标记并未缩小以腾出足够的空间。这可能与flex-box有关还是我必须寻找不同的路线？

Answer 1

默认情况下，弹性项目不能小于其内容的长度。

弹性项目的初始大小是min-height: auto 和min-width: auto。

不管flex-shrink，你的弹性项目都不会小于你的图片，除非你用min-height: 0覆盖默认值。 （如果你的容器是行方向的，那就是min-width: 0。）

此外，并非所有浏览器都将父元素的弹性高度识别为子元素百分比高度的参考。因此，在图像的父级上指定height 或flex-basis 很重要。

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#main div {
  flex: 1 1 100%;              /* 1 */
  min-height: 0;               /* 2 */
}

img {
  height: auto;                /* 3 */
  width: 100%;                 /* 3 */
}

p {
  flex-shrink: 0;
  min-height: 0;               /* 2 */
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

注意事项：

1. Chrome / Safari not filling 100% height of flex parent
2. Why doesn't flex item shrink past content size?
3. 调整原始代码块