flex与calc同时使用的兼容性问题

2020年01月04日Web前端、Web后端0

flex布局一直是在自己的demo中用的比较多，在项目中或较复杂的情况下基本不太会选择flex。不过在项目中尝试了下flex，也是遇到了一些小问题。

上下布局

一行固定，二行自适应的两行布局是比较常见的，用绝对定位的方式也是可以实现的。现在我们使用flex布局来实现下。

<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
p {
    height: 22px;
}
</style>
<body>
    <div style="display: flex;flex-direction:column; height: 100%;">
        <div style="height: 70px; background-color: olive; flex-shrink:0;">123</div>
        <div style="flex: 1; overflow-y:auto;">
            <div>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
            </div>
        </div>
    </div>
</body>

flex很简单的就实现了该布局方式。

问题复现

当在flex布局中，使用calc时会有兼容性的问题。其他内容不修改，仅修改html部分，

<body>
    <div style="display: flex;flex-direction:column; height: 100%;" id="container">
        <div style="height: 70px; background-color: olive; flex-shrink:0;" id="header">123</div>
        <div style="height: 100%; flex: 1;" id="content">
            <div style="height: 10px" id="content1"></div>
            <div style="width: 100%; height: calc(100% - 10px); overflow-y:auto;" id="content2">
                <div>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
                </div>
            </div>
        </div>
    </div>
</body>