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

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. eg:

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> 

Answer 1

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>