Expanding iframe within Flexbox

Question

I am trying to stretch the size of an iframe to fill the remaining space within my web app. I know the maximum space is being allocated for the div

Answer 1

Here are two things to consider:

1. When you create a flex container only the child elements become flex items. Any descendants beyond the children are not flex items and flex properties don't apply to them.

   Your iframe is not a flex item because it is a child of div class="row content" which is a flex item, but not a flex container. Therefore, no flex properties apply and there is no reason for the iframe to stretch.

2. To apply flex properties to the children of flex items, you need to make the flex item also a flex container. Try this:

   .box .row.content {
       flex: 1 1 auto;
       display: flex; /* new */
   }
   

With the adjustment above the iframe's parent becomes a (nested) flex container, the iframe becomes a flex item, and default flex settings (including align-items: stretch) go into effect. The iframe should now occupy the full height of the container.