+----------+     +------+
|   text   |     | text | 
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
+----------+     +------+
    max           shrunk

我想要的是< pre>要比文本列宽的元素,以便我可以适应80个字符包装的代码而不需要水平滚动条.但我想要< pre>要从内容区域溢出的元素,而不影响其流动性：

+----------+     +------+
| text     |     | text | 
|          |     |      |
+----------+--+  +------+------+
| code        |  | code        |
+----------+--+  +------+------+
|          |     |      |
+----------+     +------+
    max           shrunk

但是,一旦我插入悬垂的< pre>,max-width就会停止流动.在那里：即使我缩小浏览器超出该宽度,列的宽度仍保持在指定的最大宽度.

我用这个极少数情况重现了这个问题：

<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
    // Lorem ipsum dolor sit amet,consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit</p>
</div>

我注意到,执行以下任一操作都会带来流动性：

>删除< pre> (DOH …)
>移除浮子：向左

我目前使用的解决方法是插入< pre>将元素转换为post列中的“break”,以便post segment的宽度和< pre>细分受管理：

+----------+     +------+
| text     |     | text | 
+----------+     +------+
+-------------+  +-------------+
| code        |  | code        |
+-------------+  +-------------+
+----------+     +------+
+----------+     +------+
    max           shrunk

但是这迫使我插入额外的关闭并打开< div>元素进入post标记,我宁愿在语义上保持原始状态.

不可否认,我并没有完全掌握盒子模型如何与具有溢出内容的浮动一起工作,所以我不明白为什么浮动的组合：留在容器上和< pre>在里面它削弱了容器的最大宽度.

我在Firefox / Chrome / Safari / Opera上观察到同样的问题. IE6(疯狂的)似乎总是很开心.

这似乎也不依赖于怪癖/标准模式.

更新

我做了进一步的测试,观察到当元素有一个float：left时,max-width似乎被忽略了.我瞥了一下W3C盒子模型章节,但是没有立即看到这种行为的明确提及.有什么指针吗？