Question

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

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

我认为处理flex对象的正确方法是删除所有height/width和max-height/max-width属性，并使用flex属性来确定大小限制。 e.g：

display:
flex: 0 0 100px;

然而，由于flex对象的定位为column，我无法做到这一点。此外，只有在使用img时才会出现“bug”。用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>

Answer 1

如果在img代码上使用flex和百分比，只需将％更改为像素即可解决此问题，则会出现这种情况：

max-height: 100px;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: