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，或者div可以是一个flexbox中的子节点还是另一个的容器？

Answer 1

你必须将整个div包含在一个带有flex-direction:row的弹性框和带有flex-direction : column的内部两个div

中

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

这是您的问题的工作Demo