css - flexbox 一个元素固定高度，其他填充

Question

我想用下面的一些描述性文字制作某种图像查看器。问题是，带有描述的下方框具有固定高度，图像应该填充它所在的任何容器的剩余高度。

我想为此使用 flexbox，因为我认为它似乎是最优雅和最简单的解决方案(不使用 JS)。 这是我当前工作的代码和 codepen，它似乎主要工作:

html,  body,  #container {
    height: 100%
}
#container {
    display: flex;
    flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
    max-width: 75%;
    background-color: #fcc;
    margin: 0 auto;
}
img {
     max-height: 100%;
    /* HERE IS WHERE MY PROBLEM STARTS!; */
     max-width: 100%;
}
#container > #text {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgba(128, 128, 128, 0.7);
    padding: 5px;
    max-width: 75%;
    margin: 15px auto 0;
/*  TOP MARGIN DOESN'T WORK */
}

http://codepen.io/Kageetai/pen/AaCJy

我已经完成了大部分工作，但图像并未正确调整自身大小。正如您可以透过文本框的透明背景看到的那样，它延伸到包含的 div 的边框上，甚至延伸到文本框的后面。 那么如何才能在容器内保留具有正确宽高比的图像？

此外，使用 margin: 0 auto; 居中似乎在调整窗口大小时出现问题。图像不再居中，页面需要刷新才能恢复正常。

那么有谁知道如何使图像正确运行？ :)

Answer 1

对于图像，您可以设置高度、边距和显示。

对于图像容器，给 flex 一个 2 或 3 的值，没有给其他的值，所以它会填充尽可能多的空间。

DEMO

使用的 CSS:

html,
body,
#container {
  height: 100%
}

#container {
  display: flex;
  flex-direction: column;
}
#container > #text {
  background-color: #ccf;
  padding: 5px;
}
#container>#image {
  flex:3;
  display:flex;
}
img {
  width:auto;
  display:block;
  margin:auto;
  height:100%;
}