解决横向滚动条父级宽度未撑满

场景案例

当 overflow-x 方向显示滚动条时背景图只显示父级容器宽度大小的背景色。

代码结构

<div class="box">
  <div class="parent">
    <div class="block">
      <div class="content">这是一些内容</div>
    </div>
  </div>
</div>

<style>
  .box {
    width: 150px;
    border: 1px solid #000;
    overflow: auto;
  }
  .block {
    display: block;
    background-color: pink;
  }
  .content {
    width: 200px;
  }
</style>

场景案例解决

.block {
  min-width: max-content;
}

解决方案

父级添加样式

min-width: max-content;