Div 小于最小宽度时滚动

Question

我有 2 个 div，一个侧边栏和一个主窗格。

.main {
    position: absolute;
    min-width: 400px;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 0;
    overflow: auto;
}

.leftSidebar {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width: 200px;
    padding-left: 10px;
    overflow-x: auto;
    overflow-y: scroll;
}

我希望主 div 在尺寸小于 400 像素时有一个水平滚动条，但目前内容在小于 400 像素时会被截断。我错过了什么？

如果这有帮助，here 是一个演示。更改 window 的宽度应该理想地向主 div 添加一个滚动条，但它只会将滚动条放在整个 window.

Answer 1

解决方案：http://jsfiddle.net/nnt7ctjr/

通过给 .main 一个 min-width 你强制它停留在那些尺寸并溢出视口之外，因此整个屏幕出现一个滚动条。

所以解决方案是在 .main 内模仿这种效果。我创建了另一个对象 span.content 并给它 min-width:400px;。现在文本将保留 400px 尺寸，而 .main div 继续缩小。

Div 小于最小宽度时滚动

Div scroll when less than min-width

html

css

scrollbar