如何通过CSS使元素的宽度与容器的scrollWidth保持一致?

请各位先看代码,如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container1 {
      width: 400px;
      overflow-x: auto;
    }
    .div1 {
      background-color: blue;
    }
    .div2 {
      background-color: green;
    }
    .container2 {
      width: 400px;
      overflow-x: auto;
    }
    .container2 div {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="container1">
    <div class="div1">11111111111111111111111111111111111111</div>
    <div class="div2">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
  </div>
  <div class="container2">
    <div class="div1">11111111111111111111111111111111111111</div>
    <div class="div2">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
  </div>
</body>
</html>

chrome72下的效果如下图:
2019-12-02_144127.png
有问题的地方:
在.container1下面的div滚动到最右边时,第二个div的背景色“失效了”。

将子div设为display: inline-block;后,虽然看起来解决了问题,但并不是期望的效果,期望的效果是:不论子div宽度如何,向右、向左滚动时,子div的背景色都要填充满容器。

请问如何使两个div的背景色(或者说宽度)能充满容器的滚动宽度?

已解决 悬赏分:70 - 解决时间 2021-11-26 05:33
反对 0举报 0 收藏 0

回答2

最佳
  • @

    用 display: flex 为父级,子元素 flex: 1

    支持 0 反对 0 举报
    2021-11-25 16:23
  • @

    使用flex布局可行,改动如下:

    .container1 {
      width: 400px;
      overflow-x: auto;
      display: flex;
      flex-flow: wrap column;
    }
    .div1, .div2 {
      flex: 1;
    }

    效果如图:
    图片描述

    支持 0 反对 0 举报
    2021-11-25 17:58