flex 元素的宽度不能占满可滚动的区域?-灵析社区

577739990

做项目遇到的问题,这是用div模拟的表格,用 flex 实现,想做鼠标划过整行显示一个背景色。但是发现行元素的宽度不对,不能占满可滚动区域的宽度。 简易复现代码: Document * { box-sizing: border-box; } .container { width: 800px; margin: 100px auto; overflow: auto; } .row { display: flex; background-color: rgba(32, 288, 180, 0.1); width: max-content; } .action-column { flex: 0 0 300px; border: 1px solid #aaa; padding: 20px; } .column { flex: 1 0 auto; min-width: 200px; border: 1px solid #aaa; padding: 20px; } test test test asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf asdfasdfadsf 背景色: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/1f4dffd9c747529963846f1ab6a8e85e.png) 元素选择器选中: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/952fd3f6a4a249a4653b0f19c917f10f.png)

阅读量:141

点赞量:0

问AI
JayCoder
action-column这个元素没有设置width,虽然他的flex-basis设置了300px,但是好像max-content没有识别flex-basis,max-content识别到的宽度就是padding和按钮所占据的宽度。 解决办法就是,手动给action-column设置下宽度,不用flex-basis设置,具体的原理需要看下这个属性的规范说明