Изображение в виде гибкого элемента, не масштабирующего с максимальной шириной в Chrome

Question

У меня есть изображение в контейнере flex.

Изображение остается на своей первоначальной высоте в Chrome и не будет изменять размер пропорционально. Однако он работает в Firefox.

<figure> 
<img src="image.jpg"> 
<a href="#">A link to somewhere</a> 
</figure> 

figure { 
display: flex; 
width: 100%; 
} 

figure img {  
max-width: 50%; 
height: auto; 
} 

Answer 1

По умолчанию Flex соответствует своим детям по высоте. Чтобы отключить это поведение, вы можете указать align-items: flex-start.

https://jsfiddle.net/3s2hLv92/1/