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

Question

我正在使用此代码来确保为其他元素留出足够的空间，但它会在 flex 行的新行上跳跃。

Nav{
    width:200px;
    padding: 1em;
}

Main{
    max-width: calc(100% - 200px - 2em);
}

预期行为：

--------------------------
|         Header         |
--------------------------
|  |                     |
|N |                     |
|a |       Main          |
|v |                     |
|  |                     |
--------------------------
|          Foot          |
--------------------------

实际行为：

--------------------------
|         Header         |
--------------------------
|  |
|N |
|a |
|v |
|  |
-----------------------
|                     |
|                     |
|       Main          |
|                     |
|                     |
--------------------------
|          Foot          |
--------------------------

Body 有 display flex，header，nav，main，foot 有 flex: 1 auto；我发现如果我使用不带百分比的 calc() 。

Answer 1

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

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

好的，您想要一个使用 display:flex 的答案。这是一个新的小提琴：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%;
}