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:
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):
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.
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.
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.