Best approach to having a middle div resize when side divs disappear?

user_18649577 0
Viewed 40

I'm trying to use flexbox to resize my middle div ("canvas") whenever I apply display: none; to any of the side divs.

Currently, it works for both the right and left divs but the bottom one doesn't work. When I add display:none to the bottom canvas doesn't resize to the rest of page.

Any ideas on how to make the bottom one work as well?

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    /* display: none; */
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

flexbox css
1 Answers

That's because there's not enough content to fill up the entire screens viewport-height.

You can apply min-height: 100vh on html and/or body, and then apply height: 100% on both .outer-col and .inner-col to let them take the remaining space that is set with 100vh.

The vh-unit stands for viewport height and its value is in percentages (in its own unique way). 100vh is 100% of the viewport screen, 50vh is 50% and so on.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    height: 100%;
}

.inner-row {
    flex: 6;
}

.canvas {
    background: skyblue;
    min-height: 70vh;
    height: 100%;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    display: none;
    background: beige;
    height: 20vh;
}

.ribbon, .bottom, .canvas, .ribbon, .left, .right {
    border-style: solid;
}
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="ribbon"></div>
    <div class="outer-col">
        <div class="inner-col">
            <div class="left"></div>
            <div class="inner-row">
                <div class="canvas"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    
</body>
</html>

user_147768090
Related