Flexbox內的Flexbox - 有可能嗎？

Question

我想達到以下佈局：

+---------+---------------------+ 
|legend |      | 
+---------+      | 
|csv_input|  map   | 
|   |      | 
|   |      | 
|   |      | 
+---------+---------------------+ 

+---------+-------+ 
|legend |  | 
+---------+ map | 
|csv_input|  | 
|   |  | 
+---------+-------+ 

https://jsfiddle.net/zwjm16p3/1/

有了這個HTML和CSS：

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body, 
 
div#wrapper, 
 
div#map { 
 
    height: 100%; 
 
} 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 
#wrapper { 
 
    display: flex; 
 
    flex: 1; 
 
    background: #fef; 
 
} 
 
#map { 
 
    flex: 1; 
 
    background: #ffe; 
 
} 
 
#sidebar { 
 
    order: -1; 
 
    flex: 0 0 20em; 
 
    height: 100%; 
 
    background: #eff; 
 
} 
 
#sidebar_wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #eef; 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: row; 
 
} 
 
#legend { 
 
    width: 100%; 
 
    background: #efe; 
 
    flex: 2em 0 0 0; 
 
} 
 
#csv_input { 
 
    width: 100%; 
 
    background: #eef; 
 
    flex: 1; 
 
}

<div id="wrapper"> 
 
    <div id="map"></div> 
 
    <div id="sidebar"> 
 
    <div id="sidebar_wrapper"> 
 
     <div id="legend"> 
 
     Paste CSV data below. 
 
     </div> 
 
     <textarea id="csv_input"></textarea> 
 
    </div> 
 
    </div> 
 
</div>

我看到的是：

+----+----+---------------------+ 
|lege|csv_|      | 
| | |      | 
| | |  map   | 
| | |      | 
| | |      | 
| | |      | 
+----+----+---------------------+ 

我有兩個問題：

1. 爲什麼flex-direction: row;被忽略？
2. 我需要#sidebar_wrapper股利，或者div可以是一個flexbox中的孩子和另一個flexbox中的孩子嗎？

Answer 1

您有flex-direction : column

#wrapper{ 
display:flex; 
flex-direction:row; 
} 
#sidebar{ 
display:flex; 
flex-direction: column; 
} 

這裏flex-direction:row和內部的兩個div的包裹整個div的在一個柔性盒是你的問題的工作Demo