flex 元素宽度无法填满可滚动区域？
遇到这样一个问题：在模拟表格时，使用 flex 实现对整行鼠标划过显示背景色的效果，但发现行元素的宽度无法占满可滚动区域的宽度。
代码复现：
<div class="container">
<div class="row">
<div class="action-column">...</div>
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
</div>通过代码可以观察到：
解决方案：
分析发现，action-column 元素没有明确设置宽度。虽然 flex-basis 属性能够设置其初始宽度，但 max-content 宽度似乎没有识别该属性，而是以 padding 和按钮所占据的宽度作为宽度依据。
为了解决问题，需要手动为 action-column 设置宽度，具体做法如下：
.action-column {
width: 300px;
}这样，action-column 元素的宽度将被锁定为 300px，使其能够完全填满其内容，整行元素的宽度也将占满可滚动区域的宽度，满足鼠标划过显示背景色的需求。
以上就是Flex 元素宽度无法填满可滚动区域？如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
638
收藏
