html - 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 的子元素又是另一个 flexbox 的容器？

Answer 1

你必须用 flex-direction:row 将整个 div 包裹在一个 flex box 中，并用 flex-direction : column 包裹内部的两个 div

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

这是工作 Demo针对你的问题