以下代码,期望两个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>
