Q:

Have two elements side by side fill all space vertically

I have two elements in my page's body that I want to live side by side and fill all vertical space.
My code is super simple: 
<!-- index.html minus all the usual junk-->
<!-- also ignore the lack of a url-tag and the like, it's intentionally left out -->
<body>
  <textarea id="text-field">
  <iframe id="render-field">
</body>

and
// index.css
body {
  font: caption;
  display: flex;
  height: 100%;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}

It doesn't matter what I try, the two elements will not fill all the sapce available in the body.
Any help?

A:

First of all, use closing tags.
Second, for height: 100%; you also need to apply that to the html tag to have a height reference for the body element. And also apply margin: 0 to html and body to reset the default margin to zero:

* {
box-sizing: border-box;
}
html {
  height: 100%;
  margin: 0;
}

body {
  font: caption;
  display: flex;
  height: 100%;
  margin: 0;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}
<body>
  <textarea id="text-field"></textarea>
  <iframe id="render-field"><iframe>
</body>

