html - CSS水平滚动: rows style issue

Question

我需要在纯 html/css 中实现一个按行组织的水平滚动区域。整个区域我只需要一个卷轴(每行不需要独立的卷轴)。我试过下面的代码，但问题是行类的边框和背景样式没有像溢出内容那样扩展(我希望它们遵循内容的宽度)。 知道如何解决这个问题吗？

*, *:before, *:after {
  box-sizing: border-box;
}

#scrollHorizontalContainer {
  display: block;
  margin: 1em;
  padding: 1em;
  overflow-x: scroll;
  width: 60%;
  background-color: #666;
}

.row {
  display: block;
  height: 100px;
  width: 100%;
  white-space: nowrap;
  border: 1px solid blue;
  background-color: #222;
}

.box {
  margin: 1em;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: mediumpurple;
  text-align: center;
  border: 1px solid red;
}

<div id="scrollHorizontalContainer">

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>   
  </div>
  
  
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
  </div>
  
</div>

Answer 1

我希望这能有所帮助；请记住，行的宽度取决于您在其中有多少个框 所以当你得到更多的时候，你可能需要改变宽度

*, *:before, *:after {
  box-sizing: border-box;
}

#scrollHorizontalContainer {
  display: block;
  padding: 1em;
  overflow-x: scroll;

  background-color: #666;
}

.row {    
display: block;
height: 100px;
width: 134vw;
white-space: nowrap;
border: 1px solid blue;
background-color: #222;
}

.box {
  margin: 1em;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: mediumpurple;
  text-align: center;
  border: 1px solid red;
}

<div id="scrollHorizontalContainer">

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>   
  </div>
  
  
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
 
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div> 
  </div>
  
</div>

我会尽快提供动态调整宽度的更新