Html 当部分内容重叠时，如何使屏幕垂直滚动

假设我有一个固定大小的div，如下所示：

<div style="width: 1000px; height: 200px; border: solid;">

    </div>

它只是一个有实心边框的矩形。现在，当我缩放屏幕时，矩形的一部分被留在屏幕之外（因为它有固定的大小）。我想要的是，当部件离开屏幕时，必须出现一个水平滚动条，怎么办？（请不要建议使用

overflow-x:scroll；

，因为即使不需要滚动条，它也会创建滚动条。）

这将仅在需要时显示滚动条

---

这将仅在需要时显示滚动条。

/*用于垂直和水平滚动条*/

/*它们仅在矩形部分超出屏幕时显示*/

overflow: auto;

---

/*用于垂直和水平滚动条*/

/*它们仅在矩形部分超出屏幕时显示*/

overflow: auto;