Make divisions expand along with other divisions-CodePudding

I have 3 divisions inside main. Left, center and right. Initially I tried height 100%. This makes this div as high as my viewport. That is ok when the content fits.
The problem is, if the content on the center division gets too long, It overflows downwards.
If I use height: auto; on the center division, it expands correctly. However, the side divisions do not expand along with it (obviously, since they are independent elements).
I assumed that since they are height: 100%, they should be able to expand along with body and main, if I give body and main height: auto;. However, instead of making these 2 side divs expand, they shrink to the minimum size required to fit their elements.
Is there any way to obtain the results I want using CSS and html only?

Here is all condensed into 1 html file:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <style>
        html
        {
            Color: PURPLE;
            height: 100%;
            background-color:purple;
        }
        body
        {
            Color: #FF9933;
            height: 100%;
            background-color:pink;
        }
        
        header
        {
            text-align: center;
            background-color:yellow;
            }
        main
        {
            margin-top: 0px;
            height: auto;
            background-color:grey;
        }
        footer{
            text-align: center;
            background-color:yellow;
        }
        .leftside {
            float:left;
            background:red;
            width:15%;
            height: 100%;
        }
        .midside{
            float:left;
            background-color:green;
            width:70%;
            height: auto;
        
            text-align:center;
        }
        .rightside{
            float:right;
            background:blue;
            width:15%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <header>
        HEADER
    </header>

    <main>
        <div class="leftside">
            LEFT
        </div>

        <div class="midside">
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>
            MID<br>


        </div>

        <div class="rightside">
            RIGHT
        </div>
    </main>

    <footer>
        FOOTER
    </footer>

</body>

</html>

CodePudding user response：

CSS flexbox will do what you want if you set the 'main' element to be the flex parent. Try making the following modifications to your CSS, making sure to remove all the "float" properties and height declarations from elsewhere in the CSS. Instead of 'height 100%' on the html and body you could use 'min-height: 100vh' which guarantees it will be at least as tall as the user's screen, but can be taller as needed. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ The "flex: 0 0 auto" line is shorthand for assigning 3 properties at once, flex-grow, flex-shrink (in this case both are set to 0 - none) and flex-basis, which is the initial sizing of the div.

  main
    {
        display: flex;
        flex-flow: row nowrap;
        margin-top: 0px; 
        background-color:grey;
    } 
    main > div {
        flex: 0 0 auto;
    }
    .leftside { 
        background:red;
        width:15%; 
    }
    .midside{ 
        background-color:green;
        width:70%;  
        text-align:center;
    }
    .rightside{ 
        background:blue;
        width:15%;   
    }