I can't seem to change the max height of my container-CodePudding

enter image description hereI can't seem to change the max height of my container. I think the container is not showing up at all, but I can not figure it out. I can't seem to change the max height of my container. I think the container is not showing up at all, but I can not figure it out.

    <!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Yasef Ahnaf CV</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div >
        <div ></div>
        <div ></div>
    </div>
</body>
</html>

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Sora', sans-serif; 
}

body{
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container{
    position: relative;
    width: 80%;
    max-width: 1000px;
    max-height: 100px;
    background: white(0, 0, 0);
    display: grid;
    grid-template-columns: 1fr 2fr;
    box-shadow: 0 35px 55px rgba(0, 0, 0, 0.103);
}
.container .left_side{
    position: relative;
    background-color: rgb(87, 120, 158);
    padding: 40px;
}
.container .right_side{
    position: relative;
    background-color: white;
    padding: 40px;
}

CodePudding user response：

The height of a container will expand to cover all of its contents and children elements.

If the content is smaller than the maximum height, the max-height property has no effect.

CodePudding user response：

Because the two divs inside are of less height. You can change the max-height in the container. To make the max-height effective you should make the two divs larger.

max-height: 100px; --> height: 100px;