Changing column width in css flexbox holy grail template

HTML-CSS
1

I found a template for the holygrail layout in css flexbox. Unfortunately, I can’t figure out how to change the width of a sidebar in it. I added a width property, but it had no effect. Here’s the template code:

<!DOCTYPE html>
<style>
/* setup*/
* RESET */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* COLORS and FONTS */
body {
    color: white;
    text-align: center;
    font-size: 24px;
    line-height: 3;
}
header {
    background: orangered;
}
main {
    background: darkslateblue;
}
footer {
    background: deeppink;
}
.left-sidebar {
    background: dodgerblue;
}
.right-sidebar {
    background: forestgreen;
}
/* mobile rules */
.container, 
.content {
    display: flex;
    flex-direction: column;
}
/* Desktop rules*/
@media all and (min-width: 768px) {
    .content {
        flex-direction: row;
        flex-wrap: wrap;
    }
    main {
        flex: 2;
        order: 2;
        min-height: 80vh;
    }
    .left-sidebar {
        order: 1;
        flex: 1;
    }
    .right-sidebar {
        flex: 1;
        order: 3;
    }
}
</style>
<html>
<div class="container">
        <header>HEADER</header>
        <div class="content">
             <main>MAIN CONTENT</main>
             <aside class="left-sidebar">LEFT SIDEBAR</aside>
             <aside class="right-sidebar">RIGHT SIDEBAR</aside>
        </div>
        <footer>FOOTER</footer>
    </div> 
    </html>

I tried adding a width property to .left-sidebar, but it had no effect.

2

Do you have a working example somewhere (like codepen)? And what is the “holy grail” layout?

Anyway, just from looking at the code, it seems like ‘main’ is supposed to be twice the width of the two sidebars? Instead of setting the flex property on the items, I’d replace that with values for width (and maybe min-width and max-width):

    main {
        order: 2;
        min-height: 80vh;
        width:50%;
        max-width:50%; //optional
    }
    .left-sidebar {
        order: 1;
        width:25%;
        min-width:25%; //optional
    }
    .right-sidebar {
        order: 3;
        width:25%;
    }

I think that should work. If there’s content in main that takes up a lot of horizontal space, you could try adding the min- and max-width properties as indicated above.

3

You can also set the grow, shrink, and flex-basis values on the flex shorthand property.

4

I just put it in a codepen, I tried the changes with no apparent effect, so I reverted to the original code.
https://codepen.io/levilone/pen/poEJbRy

5

This worked, I wonder why the width property doesn’t, it seems like it should

6

And it does, at least on my end:

@media all and (min-width: 768px) {
    .content {
        flex-direction: row;
        flex-wrap: wrap;
    }
    main {
        order: 2;
        min-height: 80vh;
        width:50%;
    }
    .left-sidebar {
        order: 1;
        width:25%;
    }
    .right-sidebar {
        order: 3;
        width:25%;
    }
}

But I guess it makes no difference how you make it work, as long as it works - I’m not enough of a flexbox wizard to tell which is the better approach.

7

As long as the flex property is set to 1 it will allow the element to grow and shrink in relation/proportion to the other flexbox items. It also changes the default for flex-basis.

flex: 1 is the same as:

flex-grow: 1
flex-shrink: 1
flex-basis: 0

Without the flex property the defaults are:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

Setting flex-basis: auto will allow you to set a width, but it may still grow or shrink depending on the other flex items.

2 Likes
8

what browser are you using? I’m using firefox on ubuntu

9

This was tested with Firefox on Windows