Make div occupy the rest of the screen

Question

Good afternoon, I tried several ways and could not make the container div occupy 100% of the screen (height).

Above I have another div.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--white);
    border: 0;
    background: none;
    font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html, body, #root{
    max-height: 100vh;
    max-width: 100vw;
    width: 100%;
    height: 100%;
}
body{
    background: var(--dark);
}
.container{
    display: flex;
    width: 100%;
    flex-direction: column;
    background: blue;
}
.container img{
        align-self: center;
        width: 450px;
    } 
.container h1{
        text-align: center;
        font-size: 90px;
    }
.container p{
        margin-top: 50px;
        text-align: center;
        font-size: 40px;
    }
.container a{
        align-self: center;
        margin-top: 40px;
        padding: 15px 20px;
        background: red;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        width: 15%;
        cursor: pointer;
        border-radius: 7px;
        font-size: 18px;
        margin-left: 25px;
    }
.container a:hover{
        background: purple;
    }
div.containerdois{
    display: flex;
    width: 100%;
    flex-direction: row;
}

div.header{
padding: 20px;
margin-left: 40px;
margin-bottom:10px;
}
div.header h1{
    color: green;
    font-size: 50px;
}
div.header p{
    font-size: 15px;
    text-align: end;
    color: yellow;
    font-weight: bold;
}

div.actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-right: 80px;
    }
div.actions a {
        color: purple;
        padding: 10px;
        text-decoration: none;
        font-weight: bold;
    }
div.actions button{
        padding: 15px 20px;
        background: red;
        font-weight: bold;
        cursor: pointer;
        border-radius: 7px;
        font-size: 15px;
        margin-left: 25px;
    }
div.actions a:hover{
        text-decoration: underline;
    }
div.actions button:hover{
        background: red;
    }

<div="containerdois">
           <div class="header">
                <h1>NearPay</h1>
                <p>By &lt;/IMM&gt; Telecom</p>
           </div>
           <div class="Actions">
                <a href="https://google.pt/">Sou Vendedor</a>
                <a href="https://google.pt/">Aplicação</a>
                <a href="https://google.pt/">Criar uma conta</a>
                <button>
                    Iniciar Sessão
                </button>
           </div>
       </div>
<div class="container">
           <img src="https://3oicpu3giiud1g8ipd3781mi-wpengine.netdna-ssl.com/wp-content/uploads/2019/07/404-error-1.svg" title="Erro 404" alt="Erro 404" /> 
            <h1>Erro 404 - Pagina não encontrada!</h1>
            <p>Pelos vistos a pagina que procuras não anda por aqui.</p>
            <a href="/">
                Voltar para a pagina inicial
            </a>
       </div>

Answer 1

The problem is that the elements within the container div are set at a very large size, one suggestion is to decrease the image size to width: 250px; and remove or decrease the font-size of H1. This will leave the div height within the maximum screen height.