flex布局时,flex-direction: column;且内部含有图片时shrink失效
以下代码,期望两个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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
确实是有问题，纵向 grow是生效的，shrink确实不生效，我去查了文档，在grow中强调了
而shrink并没有类似说明，应该是不支持高度自适应。
你弄错了吧！flex-shrink 不是这么用的吧！