不同的弯曲行为:Chrome与Firefox,图像高度为%时出现子问题

0ve6wy6x  于 2022-12-06  发布在  Go
关注(0)|答案(1)|浏览(166)

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?

相关问题