html - CSS溢出滚动条裁剪背景颜色

我正在创建一个网站，需要显示一个滚动条。我尝试使用溢出：自动，但随后出现其他问题。这是我的问题的一个简单例子。我的外部div具有属性溢出：自动和angular4（或另一个div）中的组件具有新的背景颜色。当出现滚动条并向右滚动时，背景色消失。如何保留滚动条和背景色？

.outer {

    width: 110px;
    height: 110px;
    border: thin solid black;
    overflow: auto;
    background: red;
}
.inner{
background:Yellow;

}

<div class="outer">
  <div class="inner">
    <p>
 Scroll to right -> ********************************************
    </p>
  </div>
</div>

最佳答案

您可以将内部div设置为display: inline-block;，这样宽度就不会受到容器宽度的限制。还要根据需要添加min-width: 100%;。

.outer {
  width: 110px;
  height: 110px;
  border: thin solid black;
  overflow: auto;
  background: red;
}

.inner {
  background: yellow;
  display: inline-block;
}

.inner p {
  margin: 0;
}

<div class="outer">
  <div class="inner">
    <p>
      Scroll to right -> ********************************************
    </p>
  </div>
</div>