Last edited time
Jan 15, 2025 01:58 PM
type
status
date
slug
summary
tags
category
icon
password
flex-1和overflow-auto一起时无法生效
起因
在使用tailwincss的项目中，使用
flex-1嵌套的子元素当高度超过父元素的时候overflow-auto不再生效。网上找到的资料：
实际原因
flex-1简写的原版是flex: 1 1 0%，其中第三个0%代表的是flex-basis: 0%。而
flex-basis: 0%和flex-basis: 0px是不一样的，前者是基于父级的主轴，当前者的主轴长度是通过min-h来确定的时候，也就是没有准确数值的时候，子元素计算时会无法得出，这时候子元素的flex-basis会回滚到auto。也就是基于子元素的内容确定，故而导致高度被撑开，无法固定，其overflow-auto也就无法生效了。如果你的
overflow-auto层级元素的上级还有flex-1选项的时候，一定要确保父元素的flex-direction是符合你的排列的，比如纵向布局就必须是column，简写也就是flex-col，否则依然不会生效！解决方案
将
overflow-auto层级的元素的flex-basis设置为0px或者0 。错误写法 ❌
正确写法 ✅
- 作者:七月
- 链接:https://huaqinda.com/article/17bbbdbf-a033-801c-850a-cc036920045e
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。