隐藏 CSS 滚动条直到满足最大宽度和最大高度条件

Question

当 div 内的内容超过最大宽度时，我试图显示滚动条。

以下是显示滚动位置的代码 sn-p。但问题是，即使没有可滚动的内容，滚动条也会出现。如果我们在全屏模式下运行以下 sn -p ，那么我们可以注意到，滚动条默认是可见的。我需要它们仅在满足最大宽度或最大高度约束时出现。

.scrollbar{
    height: 150px;
    overflow:scroll;  
}

.big-box{
  height:800px;
  width:1000px;
  background-color:#A8D0DB;
}

   <div class="scrollbar" id="style-1">   
      <div class="big-box"></div>
   </div>

https://jsfiddle.net/g6fehv2w/1/

Answer 1

你可以使用overflow: auto，它只在内容溢出时显示滚动条。

您可以将overflow-y 设置为auto 以仅在垂直内容溢出时显示滚动条，将overflow-x 设置为auto 以仅在水平内容溢出时显示滚动条。

请参阅documentation。