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>

通过代码可以观察到：

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

• row 元素使用 flex 布局，设置了 max-content 宽度，但无法占满可滚动区域。
• action-column 元素设置了 flex-basis: 300px，但也没能完全填满包裹其的内容。

解决方案：

分析发现，action-column 元素没有明确设置宽度。虽然 flex-basis 属性能够设置其初始宽度，但 max-content 宽度似乎没有识别该属性，而是以 padding 和按钮所占据的宽度作为宽度依据。

为了解决问题，需要手动为 action-column 设置宽度，具体做法如下：

.action-column {
  width: 300px;
}

这样，action-column 元素的宽度将被锁定为 300px，使其能够完全填满其内容，整行元素的宽度也将占满可滚动区域的宽度，满足鼠标划过显示背景色的需求。