如何让子元素匹配块级父容器的100%可滚动宽度

AI 小北

2026-6-13

问题描述

此前已有类似问题，但解决方案不适用于当前场景。需修改Angular MatTable，为每行添加细节行，使其宽度与上方可能触发横向滚动的行一致。几乎无法调整容器，希望尽可能少做修改以保持与Angular MatTable更新的兼容性。

要求：

不使用Javascript
不修改其他元素样式
不添加额外容器
绿色栏（细节行）需匹配容器的可滚动宽度，即使绿色栏本身内容可能更宽，也必须保持与上方行相同宽度

场景说明：

.container 对应Angular表格组件，尽量避免改动
.wrapper 对应表格实际行（数量可能很多）
绿色栏是每行下方的细节行，必须匹配上方行的宽度

代码示例：

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  overflow-x: auto;
}

.wrapper {
  display: flex;
}

.text {
  min-width: 30px;
  text-align: center;
}

.text:nth-child(even) {
  background-color: #ddd;
}

.bar {
  background-color: green;
  height: 30px;
}

<div class="container">
  <div class="wrapper">
    <div class="text">1</div>
    <div class="text">2</div>
    <div class="text">3</div>
    <div class="text">4</div>
    <div class="text">5</div>
    <div class="text">6</div>
    <div class="text">7</div>
    <div class="text">8</div>
    <div class="text">9</div>
    <div class="text">10</div>
    <div class="text">11</div>
    <div class="text">12</div>
    <div class="text">13</div>
    <div class="text">14</div>
    <div class="text">15</div>
    <div class="text">16</div>
    <div class="text">17</div>
    <div class="text">18</div>
    <div class="text">19</div>
    <div class="text">20</div>
    <div class="text">21</div>
    <div class="text">22</div>
    <div class="text">23</div>
    <div class="text">24</div>
    <div class="text">25</div>
    <div class="text">26</div>
    <div class="text">27</div>
    <div class="text">28</div>
    <div class="text">29</div>
    <div class="text">30</div>
  </div>
  <div class="bar"></div>
  <div class="wrapper">
    <div class="text">1</div>
    <div class="text">2</div>
    <div class="text">3</div>
    <div class="text">4</div>
    <div class="text">5</div>
    <div class="text">6</div>
    <div class="text">7</div>
    <div class="text">8</div>
    <div class="text">9</div>
    <div class="text">10</div>
    <div class="text">11</div>
    <div class="text">12</div>
    <div class="text">13</div>
    <div class="text">14</div>
    <div class="text">15</div>
    <div class="text">16</div>
    <div class="text">17</div>
    <div class="text">18</div>
    <div class="text">19</div>
    <div class="text">20</div>
    <div class="text">21</div>
    <div class="text">22</div>
    <div class="text">23</div>
    <div class="text">24</div>
    <div class="text">25</div>
    <div class="text">26</div>
    <div class="text">27</div>
    <div class="text">28</div>
    <div class="text">29</div>
    <div class="text">30</div>
  </div>
  <div class="bar"></div>
</div>

解决方案

只需修改.bar的CSS样式，添加display: table;和width: 100%;属性：

.bar {
  background-color: green;
  height: 30px;
  display: table;
  width: 100%;
}

原理：

display: table 会让元素自动适配父容器的滚动宽度（即内部最宽元素的宽度），同时保持最小宽度为父容器的100%
无需修改其他元素样式、添加额外容器或使用JavaScript，完全符合需求，也不会破坏现有表格样式，能兼容后续Angular版本

内容的提问来源于stack exchange，提问作者tris