仅使用 css 滚动可调整大小的列答案

【问题标题】：Resizable columns with scrolling using only css仅使用 css 滚动可调整大小的列
【发布时间】：2013-03-10 06:51:26
【问题描述】：

我正在尝试创建一个灵活的布局，其中包含不应换行的预格式化文本的列。我的问题是，仅当我将可滚动容器的宽度设置为具体的宽度值时，列中的滚动条才会出现，% 似乎不起作用。如果我这样做了，它周围的列仍然会随着浏览器窗口正确调整大小，但容器的宽度不会因为它是固定的而相应改变。

这个优秀的教程对我创建列有很大帮助：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但它建立在可调整大小的内容之上。

有什么办法可以用纯 CSS 调整滚动容器和列的大小？

【问题讨论】：

标签： html css scrollbar resizable

【解决方案1】：

我已经在使用overflow:auto，但我的花车总是占用与其内容一样多的空间。这导致列超出屏幕尺寸。

我在这个 SO 问题中找到了答案： force a div to contain floated child divs

我基本上必须让我的容器包含浮动元素并防止其折叠。 http://jsfiddle.net/zfsjb/1/

<style>
    #main {
    clear: both; /* Contain floating elements */
    background-color: red;
    }

    #main:after { /* Prevents the collapsing of the containing element. */
    content: ".";
    clear: both; /*  */
    display: block;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

    #primary {
    float: left;
    margin: 0;
    width: 20%;
    background-color: yellow;
    }
    #secondary {
    float: left;
    width: 80%;
    background-color: blue;
    }
</style>
<div id="main">
    <div id="primary">Primary</div>
    <div id="secondary">Secondary</div>
</div>

【讨论】：

【解决方案2】：

我认为您可以将溢出设置为滚动，这将解决问题

【讨论】：

【解决方案3】：

将overflow: scroll设置为左容器，然后在内部p或其他元素设置宽度

#container1{
    overflow: scroll;
}
#container1 #coll p{
    width: 700px;
}

【讨论】：

谢谢，但我无法设置内部内容的宽度。这些边界框由预格式化确定。