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

作者站长头像
站长
· 阅读数 6

做项目遇到的问题,这是用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>

背景色:flex 元素的宽度不能占满可滚动的区域?

元素选择器选中:flex 元素的宽度不能占满可滚动的区域?

回复
1个回答
avatar
test
2024-06-27

action-column这个元素没有设置width,虽然他的flex-basis设置了300px,但是好像max-content没有识别flex-basis,max-content识别到的宽度就是padding和按钮所占据的宽度。

解决办法就是,手动给action-column设置下宽度,不用flex-basis设置,具体的原理需要看下这个属性的规范说明

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容