У меня проблема с элементом flex в css.
Пожалуйста, смотрите следующий код в jsfiddle.
https://jsfiddle.net/mitsuru793/n0y6g5qu/32
html
<html>
<head>
</head>
<body>
<div class="main">
<div class="main-flex-container">
<div class="text">text</div>
<div class="image-flex-container">
<div class="label">label</div>
<img src="https://dummyimage.com/200x400/ff0000/ffffff">
</div>
</div>
</div>
</body>
</html>
scss
.main {
width: 80%;
height: 100px;
color: white;
}
.main-flex-container {
display: flex;
height: 100%;
background-color: green;
.text {
width: 100%;
background-color: orange;
}
}
.image-flex-container {
display: flex;
.label {
background-color: #0000aa;
}
img {
height: 100%;
}
}
Этот код отображается по-разному в разных браузерах. Моя операционная система MacOs Mojave 10.14.6.
рендеринг изображения
Результат рендеринга оперой - это то, что я ожидал. Почему другие браузеры отображаются неправильно? Это ошибка?
Красная область - это тег img и изображение. Это должно быть уменьшено оранжевым, который имеет 100% ширину. Однако, в не опере, ширина красной области (изображение) является шириной исходного изображения. Я хочу, чтобы ширина была уменьшена.