可滚动水平容器的内部 div 具有其中元素的宽度

Question

Sorry if I couldn't be clear in the title, but checking out the following jsFiddle will clear out what I want to do:

JSFiddle

I have a horizontally scrollable container that contains a div, and in that div i have several inline-block container. I want the inner container's border to span the whole width of the scrollable area. Any help is appreciated.

<div class="container">
  <div class="innerContainer">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
</div>

.container {
  overflow-x: auto;
  white-space: nowrap;
  border: solid 1px green;
  padding: 20px;
}

.innerContainer {
  border-top: solid 1px red;
}

.innerContainer div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin-right: 20px;
  margin-top: 10px;
  border: solid 1px gray;
}

Answer 1

just move overflow-x: auto;

from .container

to .innerContainer

or

use width:max-content in .innerContainer

 .container { white-space: nowrap; border: solid 1px green; padding: 20px; } .innerContainer { border-top: solid 1px red; overflow-x: auto; } .innerContainer div { display: inline-block; width: 300px; height: 100px; margin-right: 20px; margin-top: 10px; border: solid 1px gray; }

 <h3> I want the red border to expand all the width of the scrollable container. </h3> <div class="container"> <div class="innerContainer"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> </div> </div>

Answer 2

.innerContainer {
  width: max-content;
}