应用错误收集

以下HTML文件不显示任何内容，每个元素都是0像素高：

<html>
    <body>
        <div style="display: flex; flex-direction: column">
            <div style="flex: 1; display: flex">
                <pre>Hello</pre>
            </div>
        </div>
    </body>
</html>

我希望它在页面上显示pre - 格式化的“Hello”。

如果我删除以下任何内容，则pre - 格式化的“Hello”会正确显示，并且元素会从0像素高变为10像素高：

围绕div

pre

应用于这些div的任何内联样式（display，flex-direction, flex`）

将pre转换为div会使“Hello”出现，但周围的元素仍然是不正确的高度，0像素高，而不是预期的数十像素高。

有谁知道造成这种情况的原因是什么？

Flexbox CSS会产生零像素高的元素

0 个答案: