html - 使用 calc(100% - x) 会破坏 flex 布局

Question

<分区>

Answer 1

您可以通过将 float:left 添加到导航面板和主面板来解决这个问题。

这是一个 JSFiddle，它说明了这是如何完成的:http://jsfiddle.net/WChBm/3/

好的，您想要一个使用 display:flex 的答案。这是一个新的 fiddle :http://jsfiddle.net/p7zEE/

body, html {
    height: 100%;
}

#header, #footer {
    height: 30px;
    width: 100%;
    background: #4ed;
}

#wrapper {
    height:  calc(100% - 60px);
    display: flex;
}

#nav {
    width: 200px;
    background-color: #999;
    height: 100%;
    display: inline-block;
}

#main {
    display: flex;
    flex: 1;
    background-color: #6f5;
    height: 100%;
}