flexbox test

by koba04

HTML

<div id="main">
  <div id="header">header</div>
  <div id="content1">
  <textarea></textarea>
  </div>
  <div id="content2">
    yyy
  </div>
  <div id="footer">footer</div>
</div>

CSS

html, body {
  height: 100%;
}
#main {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
#header {
  flex-basis: 100%;
  height: 10%;
  box-sizing: border-box;
}
#content1 {
  display: flex;
  flex-basis: 50%;
  height: 80%;
  box-sizing: border-box;
  background-color: #ccc;
}
textarea {
  flex-grow: 1;
}
#content2 {
  flex-basis: 50%;
  background-color: #ddd;
}
#footer {
  flex-basis: 100%;
  height: 10%;
  box-sizing: border-box;
}