I have a trouble about flex item in css.
(我对CSS中的flex项目有麻烦。)
Please see the folloing code in jsfiddle.
(请在jsfiddle中查看以下代码。)
https://jsfiddle.net/mitsuru793/n0y6g5qu/32
(https://jsfiddle.net/mitsuru793/n0y6g5qu/32)
html
(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%;
}
}
This code renders different on each browsers.
(此代码在每个浏览器上呈现不同的内容。)
My os is macOs Mojave 10.14.6. (我的操作系统是macOs Mojave 10.14.6。)
rendering image
(渲染图像)
The redering result by opera is that I was expected.
(歌剧的改头换面是我的期望。)
Why does other browsers render wrong? (为什么其他浏览器呈现错误？)
Is this bug? (这是错误吗？)
Red area is a img tag and image.
(红色区域是img标签和图像。)
This must be shrunken by orange are which has 100% width. (必须使用宽度为100％的橙色缩小。)
However, in not opera, the width of red area(image) is original image width. (但是，在非歌剧中，红色区域（图像）的宽度为原始图像宽度。)
I want the width to be shrunken. (我希望缩小宽度。)
ask by mitsuru translate from so 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
