Question

在Safari上的Flexbox容器内，Flexbox子高度始终为0。参见https://jsfiddle.net/webiator/5mgfrksz/。底部应为绿色（与Chrome一样）

<html>
<head>
    <style>
        html {
            height: 100%;
        }
        body{
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .top {
            display: block;
            background: yellow;
        }

        .middle {
            background: red;
        }

        .bottom {
            background: green;
            display: flex;
            height: 180px;
        }
    </style>
</head>
<body>
    <div class="top">
        <p>Top</p>
    </div>
    <div class="middle">
        <p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p><p>Middle</p>
    </div>
    <div class="bottom">
        <p>This should have a height of 180px. Instead it is 0 for Safari.</p>
    </div>
</body>

我想念什么？

如何在Safari上固定flex box child的高度= 0？

0 个答案: