Google Chrome 中的 Flex 列和最大高度错误答案

【问题标题】：Flex column and max-height bug in Google ChromeGoogle Chrome 中的 Flex 列和最大高度错误
【发布时间】：2017-11-30 08:27:23
【问题描述】：

在 Google Chrome、Safari 和 IE 中，我遇到了 flex 内容溢出问题。

我确定这个问题与 Chrome 不将 flex 对象级联到其子级的方式有关。

我相信处理 flex 对象的正确方法是删除所有height/width 和max-height/max-width 属性并使用flex 属性来确定大小限制。例如：

display:
flex: 0 0 100px;

但是，由于 flex 对象被定位为 column，我不能这样做。此外，这个“错误” 仅在使用 img 时发生。用 div 替换 img 会导致 flex 的行为符合预期。

示例（在 Chrome 中查看）

span{
  background:#4b0;
}
.Flx {
    display: flex;
}
.Child {
    display: flex;
    flex:1;
    align-items: center;
    justify-content: center;
    max-height: 100px;
    flex-direction: column;
    background-color: #aaa;
}
.Child img {
    max-height: 100%;
    background-color: #fb4a4a;
}

<div class="Flx">
  <div class="Child">
    <span>TEXT</span>
    <img src="https://i.stack.imgur.com/440u9.png">
  </div>
</div>

【问题讨论】：

检查更新的答案可能会对您有所帮助
可能的指导：stackoverflow.com/q/44521054/3597276

标签： html css google-chrome flexbox

【解决方案1】：

似乎在img 标签上使用 flex 和百分比时会发生这种情况，只需将 % 更改为像素即可解决问题：

max-height: 100px;

span{
  background:#4b0;
}
.Flx {
  display: flex;
  flex:1;
}
.Child {
  display: flex;
  align-items: center;
  justify-content: center;    
  flex-direction: column;
  background-color: #aaa;
}
.Wrap{
  align-items: center;
  justify-content: center;
  background:#00d;
}
.Wrap img {
  max-height: 100px;
  max-width:100%;
  background-color: #fb4a4a;
}

<div class="Flx">
  <div class="Child">
    <span>TEXT</span>
    <div class="Flx Wrap">
      <img src="https://i.stack.imgur.com/440u9.png">
    </div>    
  </div>
</div>

【讨论】：