How to make an iframe fit 100% of the container’s remaining height with CSS?

Sometimes, we want to make an iframe fit 100% of the container’s remaining height with CSS.

In this article, we’ll look at how to make an iframe fit 100% of the container’s remaining height with CSS.

How to make an iframe fit 100% of the container’s remaining height with CSS?

To make an iframe fit 100% of the container’s remaining height with CSS, we use flexbox.

For instance, we write

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

to add a div with another div and iframe inside it.

Then we wirte

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.row-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: blue;
  overflow: hidden;
}
.first-row {
  background-color: lime;
}
.second-row {
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
}

to make the outer div a flex container with display: flex;.

We make its flex direction vertical with flex-direction: column;.

Then we make the iframe fill the remaining height with flex-grow: 1;.

Conclusion

To make an iframe fit 100% of the container’s remaining height with CSS, we use flexbox.