<!DOCTYPE html>
<style>
div {
  width: 50px;
  height: 50px;
  background-color: green;
}

iframe {
  border: 10px solid blue;
}

.normal {
  height: calc(100% - 20px);
  width: calc(100% - 20px);
}

.min {
  min-height: calc(100% - 20px);
  min-width: calc(100% - 20px);
  width: 30px;
  height: 30px;
}

.max {
  max-height: calc(100% - 20px);
  max-width: calc(100% - 20px);
}
</style>
<!-- iframes should grow with their containers -->
<div><iframe class=normal src="broken.html"></iframe></div>
<div><iframe class=min src="broken.html"></iframe></div>
<div><iframe class=max src="broken.html"></iframe></div>
<script>
document.body.offsetHeight;
let containers = document.getElementsByTagName("div");
for (let container of containers)
  container.style.height = "100px";
</script>