Flex column and max-height bug in Google Chrome

Question

In Google Chrome, Safari and IE I am encountering an overflow issue with the flex content.

The issue I am sure is related to the way Chrome doesn't cascade the flex object to it's children.

I believe the correct way to handle the flex objects would be to remove all height/width and max-height/max-width attributes and to use the flex attribute to determine the size limitations. e.g:

display:
flex: 0 0 100px;

However as the flex object is orientated as a column I can't do this. Additionally this "bug" only occurs when using an img. Replacing the img with a div causes flex to behave as expected.

EXAMPLE (View in 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>

possible guidance: https://stackoverflow.com/q/44521054/3597276 — Michael Benjamin, Jun 27 '17 at 15:20

score 2 · Accepted Answer · answered Jun 27 '17 at 13:36

It appears that this occurs when using flex and percentages on img tags simply changing % to pixels resolved the issue:

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>

Flex column and max-height bug in Google Chrome

1 Answers1