How do I put a dynamic font-size based on the box-size?

Question

I'm making a web quiz game based on botany for a university sponsored project to help students in the high school in general. I need the text to always fill the entire box (buttons, question aswers, etc.) to keep it looking nice. Here's how it looks like right now.

How the game looks (for now)

The CSS for the question text is:

.question-text {
        text-align: justify;
        border: 1px solid black;
        letter-spacing: 0px;

        /* --- POSITION --- */
        position: fixed;
        top: 10%;
        left: 1%;

        /* --- SIZE --- */
        width: 75%;
        height: 20%; 
    }

Any advice? I'm also taking sugestions.

Answer 1

em unit is the way to go with dynamic font-sizes which is relative to:

Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

    .question-text {
        // pervouis properties
        /* Font-Size */

        font-size: <numericAmount>em;
     }