I am attempting to create a layout that looks like this:
+---------+---------------------+
|legend | |
+---------+ |
|csv_input| map |
| | |
| | |
| | |
+---------+---------------------+
+---------+-------+
|legend | |
+---------+ map |
|csv_input| |
| | |
+---------+-------+
https://jsfiddle.net/zwjm16p3/1/
Using the following HTML and 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>This is what I am currently seeing:
+----+----+---------------------+
|lege|csv_| |
| | | |
| | | map |
| | | |
| | | |
| | | |
+----+----+---------------------+
I have two inquiries:
- Why is
flex-direction: row;not taking effect? - Do I need the
#sidebar_wrapperdiv, or can a div both be the child in one flexbox and the container of another?