flex 元素的宽度不能占满可滚动的区域?
做项目遇到的问题,这是用div模拟的表格,用 flex 实现,想做鼠标划过整行显示一个背景色。但是发现行元素的宽度不对,不能占满可滚动区域的宽度。
简易复现代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="action-column">
<button>test</button>
<button>test</button>
<button>test</button>
</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
<div class="column">asdfasdfadsf</div>
</div>
</div>
</body>
</html>
背景色:
元素选择器选中:
回复
1个回答
test
2024-06-27
action-column这个元素没有设置width,虽然他的flex-basis设置了300px,但是好像max-content没有识别flex-basis,max-content识别到的宽度就是padding和按钮所占据的宽度。
解决办法就是,手动给action-column设置下宽度,不用flex-basis设置,具体的原理需要看下这个属性的规范说明
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容