奇数空格：浮动父级内的预行为

Question

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

code元素已设置overflow: auto，因此当其内容超出指定的宽度时，它应在其中显示水平滚动条而不包裹线条。

这种方法很好，但只有当父级（即左列）没有浮动时才能正常工作。即窗户很窄的时候。您可以自己尝试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;
}

这很奇怪，因为我希望代码元素具有动态宽度，就像窗口狭窄时一样，但是当父级浮动时，它会因某种原因获得固定宽度。

我在这里做错了吗？这应该发生吗？

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

Answer 1

根据您更新的小提琴，您将有问题的元素{400}扩展为max-width。如果文本中包含长行文本，则可能占用整个宽度。基本上，只是您的设计对其内容做出响应。右列完全按照它应该下降到它下方，如果你将容器的大小调整得更小，pre块就会随之开始缩小。

要查看我的意思，请右键单击该元素，然后Inspect Element查看其计算的宽度。此外，如果你考虑它，它必须是400px（或任何最大宽度）。否则，它还没有到达溢出点来获取你正在测试的滚动条！