I've just observed a strange behavior on a somewhat contrived flex example: Firefox and Safari show one thing while Chrome behaves differently (probably the difference is in the flex algorithm). I'd like to fire a bug, but I don't know which result should be expected - I understand why Firefox and Chrome behave like that but I simply ignore the intended way.
Here is the code (please note that the flex item - that is, the .col - doesn't have any explicit height and we are in the default align-items:stretch
setting):
.row {
display: flex;
height: 50px;
}
.col {
display: flex;
border: 1px solid blue;
}
img {
height: 100%;
}
<div class="row">
<div class="col">
<img src="https://picsum.photos/200/300">
</div>
</div>
you can find a codepen here
This is how this page looks on Firefox/Safari: https://i.stack.imgur.com/XnYvS.png
and this is how it shows on Chrome: https://i.stack.imgur.com/xDYFi.png
What do you think? Which flex algorithm works as intended? Who is right?
1条答案
按热度按时间lf5gs5x21#
我创建了演示
第一个