<div class="wrapper">
      <div class="content-top">
        <p><a href="/sub/ch01.shtml">Top</a></p>
        <p><a href="/00-ToC.shtml">Table of Contents with text that can wrap to multiple lines. Table of Contents with text that can wrap to multiple lines.Table of Contents with text that can wrap to multiple lines.Table of Contents with text that can wrap to multiple lines.Table of Contents with text that can wrap to multiple lines.Table of Contents with text that can wrap to multiple lines.</a></p>
      </div>
      <div class="content-main">
        <iframe src="https://codepen.io/paulobrien/pen/pogLodw" frameborder="0"></iframe>
      </div>
    </div>

/* lets add box sizing and some defaults to make things easier.*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-text-size-adjust: 100%; /* stop ios zooming text  on orientation change */
  text-size-adjust: 100%;
  line-height: 1.5;
}
html,
body {
  margin: 0;
}
.wrapper {
  width: 100%;
  max-width: 40em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 1rem;
  background: #ccc;
}
iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%; /* ok to use height:100% here as height is defined by co-ordinates and context*/
  border: none;
  overflow: auto;
}
.content-top {
  border: 1px solid red;
}
.content-main {
  flex: 1 0 0%;
  position: relative;
  background: green;
}
@media screen and (max-width: 560px) {
  iframe {
    position: static;
    height: 50vh;
  }
}
@media screen and (max-height: 600px) {
  iframe {
    position: static;
    height: 100vh;
  }
}