Set height depending on container

Question

I am trying to create an app-like website, but I am struggling with having a container within a container.

As you can see when I expand the "Summary" the container doesn't stay within the other container.

How do I fix this?

This is part of my HTML:

<div class ="block" id="page2" heigth=100% style="display: block;">
            <details>
                <summary id="resultnaam">Sensire</summary>
                <p padding=5px>MMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
                MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p>
            </details>
            <div class="block" id="iframeblock">
                <iframe src="secretlinkgg" width=100% heigth=100%</iframe>
            </div>
    </div>

And here is some of the CSS:

.block {
    text-align: center;
    position: relative;
    margin: 5px;
    height: 100%;
    border-radius: 6px;
    -webkit-box-shadow: 
      inset 0 0 10px rgba(0,0,0,0.18),
            2px 3px 16px rgba(0,0,0,0.6);
    -moz-box-shadow: 
      inset 0 0 10px rgba(0,0,0,0.18),
            2px 3px 16px rgba(0,0,0,0.6);
    box-shadow: 
      inset 0 0 10px rgba(0,0,0,0.18),
            2px 3px 16px rgba(0,0,0,0.6);
    background: whitesmoke;
}
#iframeblock {
        padding: 10px;
        display: flex;
        height: 85%
    }

Please help :)

Answer 1

It's already fixed.

The code I used is correct :P