CSS溢出卷轴庄稼背景颜色

Question

我正在创建一个网络，需要显示滚动条。我尝试使用 overflow：auto ，但随后出现了其他问题。这是我的问题的一个简单例子。我有外部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>

Answer 1

您可以将内部div设置为<p id ="userName">username</p> <p id ="time"></p> <p id ="logcount">timeCounter</p> <!-- You want the .js reference to come before your attempt to use the code in the file and also after any elements that the code will refer to. --> <script src="scripts/userInfo.js"></script> <script>dateTime();</script> ，这样宽度不会受到容器宽度的限制。同时根据需要添加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;
}

Answer 2

添加：width: fit-content;

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

.inner {
  background: Yellow;
  width: fit-content;
}

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