小于最小宽度时的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像素时具有水平滚动条，但当前内容在小于时才被截断。 我想念什么？

如果有帮助， 请看这里的演示。 理想情况下，更改窗口的宽度应将滚动条添加到主div，但仅将滚动条放在整个窗口上。

Answer 1

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

通过为.main提供min-width您可以强制它保持这些尺寸并在视口之外溢出，因此整个屏幕上都会出现一个滚动条。

因此，解决方案是在.main模拟此效果。 我创建了另一个对象span.content ，并将其的min-width:400px; 。 现在， .main div继续缩小时，文本将保留400px尺寸。