html - 奇数空白 : pre behavior inside floated parent

Question

我有一个简单的响应式 2 列设计，左边的列有 pre 和一个嵌套的 code 元素。

code 元素有 overflow: auto 设置，所以当它的内容超过指定的宽度时，它应该在里面显示一个水平滚动条而不换行。

这工作正常，但只有当父级(即左列)不 float 时才有效。 IE。当窗口狭窄时。可以自己试试here .

@media (min-width: 300px) {
    .left {
        float: left;
        margin-right: 100px;
        max-width: 400px;
    }

    .right {
        float: right;
        margin-left: -100px;
        width: 100px;
    }
}

pre {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}

code {
    overflow: auto;
}

这很奇怪，因为我希望代码元素具有动态宽度，就像它在窗口较窄时那样，但是当父元素 float 时由于某种原因它获得了固定宽度。

我是不是做错了什么？这是应该发生的吗？

请注意，我不是在寻找 JS 解决方法，这是非常简单的 html/css，应该开箱即用。

Answer 1

根据更新后的 Fiddle，您为相关元素提供了 400px 的 max-width 以展开。当其中有一长行文本时，它可能会占据整个宽度。基本上，这只是您的设计对其内容做出响应。右边的列完全按照它应该的样子下降到它下面，如果你将容器的大小调整得更小，pre block 开始随之缩小。

要了解我的意思，请右键单击该元素并选择 Inspect Element 以查看其计算出的宽度。另外，如果你考虑一下，它必须是 400px(或者任何最大宽度)。否则，它还没有达到其溢出点来获取您正在测试的滚动条!