内部 div 不占用外部 div 的整个滚动宽度

Question

我在以下链接中有一个使用 html 和 CSS 的示例：https : //js.do/sun21170/inner-width-not-taking-whole-of-outer-width

问题是带有绿色背景颜色的内部 div 没有占用外部 div 的整个滚动宽度。

问题：除了将内部 div 的宽度设置为 150% 左右之外，是否有一些 CSS 可以用来使内部 div 样式应用于整个外部 div 的滚动宽度？

我正在使用的示例代码如下。

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>

<style>
.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   width:100%;
}
</style>

Answer 1

是的，只需将 设置.innerDiv为display: inline-block;。这样.innerDiv，如果不指定width.

这是工作示例：

.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   display: inline-block; /* ? this does the trick */
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   /* width: 100%; ? this has to be removed */
}

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>