极客观点
项目管理
HarmonyOS
以下代码,期望两个div带着图片,自动shrink到height为150px。
实际在chrome中会超出#container元素
请问这是为什么?
<style>
#container {
display: flex;
width: 100px;
outline: 1px solid blue;
height: 300px;
flex-direction: column;
}
#container div {
width: 100%;
height: 200px;
flex-shrink: 1;
}
#container div img {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="container">
<div>
<img src="./test.png">
</div>
<div>
<img src="./test.png">
</div>
</div>
</body>
确实是有问题，纵向 grow是生效的，shrink确实不生效，我去查了文档，在grow中强调了
而shrink并没有类似说明，应该是不支持高度自适应。