* {
    /*
    https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    It is often useful to set box-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.  
    
    On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.*/
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

/* ALL CONTAINER up to the flex container, including the flex container itself */
html,
body,
.maincontainer {
    /* necessary */
    height: 100%;
    min-height: 100%;
}

.maincontainer {
    /* for the flex container */
    display: flex;
    flex-direction: column;
    overflow:hidden;
}

    .maincontainer .box {
       /* text-align: center;
        font-family: sans-serif;
        font-size: 30px;*/
        // padding: 20px;
        /* not necessary
    this is actually for the each box content to be aligned inside of it */
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
    }

    .maincontainer .box-1 {
        // height is used for this cell as preferred // https://www.w3.org/TR/css-sizing-3/#preferred-size-properties // but not obeyed ! when size of the page becomes too small to accomodate it // in that case it does contributes but not obeyed, as for example min-height // https://www.w3.org/TR/css-sizing-3/#min-size-properties // height: 400px;
        // if you uncoment flex, it will take precedence // preferred over its (in this case) euqivalente https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow // flex: 1;
    }

    .maincontainer .box-2 {
        // height is not taken into consideration as a preffered size // when flex directive is provided // https://www.w3.org/TR/css-flexbox-1/#propdef-flex says:
        /**  When a box is a flex item, flex is consulted **instead of the [main size property](https://www.w3.org/TR/css-flexbox-1/#main-size-property)** to determine the main size of the box */
        // height: 400px;
        flex: 1;
        overflow-y: auto;
    }

    .maincontainer .box-3 {
        // flex: 2;
        // it is overwritten by flex directive and not respected any more
        /* **WARNING**: if this value is set to smaller than necessary for the inner content to fit, we will endup with the overflow and vertical page scroller, which can surely avoided with `overflow-y: scroll;`*/
        //height: 60px;
        // height: 30px;
        // overflow-y: scroll;
        // however, `min-height` is still taken in the consideration in the same manner, so if flex directive can be accomodated without breaking min-height, it will be, but if it cannot the min-height will be respected, even for the price of introducing the scroller on the whole page // min-height: 220px;
        // similar to `max-height`;
        it is still taken in the consideration // max-height: 100px;
    }