Flexbox and borders
Hello there
I have a block of text and and an empty div with background color and want to layout them horizontally using flexbox. All works great until I add border to the empty div. For some reason the borders are not accounted for the width and instead added on top of the resulted width of the div. As a result the div is wider than the text block. the box-sizing property for everything is set to border-box if that's relevant.
Is this the expected outcome?
24 Replies
Hi I can help you.
@Jiggle are you using
border or outline?
border should be part of the box model, outline is not.
If you're using border, please share your code in something like codepen, otherwise it's really hard to tell what's going on exactlyim using border only. here are the files
since I posted I fiddled with the flex options. seems like it works if I give them explicit widths using flex-basis. But why doesn't it take the border into account by default? Would like to understand that
any chance you can make a minimal example in codepen or something?
yes. a minute
when all I do is set a width on two flex items to 50% and then stuff an oversized border on the one on the right, the one on the left is completely left alone. Maybe you're setting fixed widths on stuff or something?
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
please see the code
seems to work just fine for me?
firefox with your border value
chrome with a higher border value
i mean they are not distributed equally once the border is introduced
not 50/50 with the border
there's small difference. but remove the border and they have exactly equal widths
it seems like the issue is the
flex: 1;
the one on the left and right container class. if I change that to width: 50% it works. I'm not sure why, it seems like using flex: 1 causes it to ignore the box-sizing propertyif you comment width out and uncomment flex on the
.outer > div selector (the equivalent of your .main-section-left-container, .main-section-right-container) it seems to break just like yours
otherwise it's smack dab in the middle no matter how extreme you make the borderit will work if you consider the border-size as the flex-basis. then the childs will grow evenly
so for both sides:
flex: 1 0 40px; where 40 px is the 2times the border size (left and right)exactly. and isn't it strange that flex does not take the border into account?
yes. this works. thank you. apparently, because border doesn't get "squished" all the way to zero as the content itself, basis needs to start not from zero but from size of borderx2
but I'd expect that flexbox would have considered this somehow
you can give it a larger value if you also want to include padding. the value is a minimum
is there technical reason why flex-basis: auto couldn't have taken care of this?
because flex can not shrink the padding and border to 0.
it starts growing evenly from the smallest possible size. and because your both columns have a different minimum size, they stay different
thank you a lot, @Jochem and @MarkBoots .
glad to help 🙂