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?
No description
24 Replies
Jiggle
Jiggle•13mo ago
No description
No description
Leopard
Leopard•13mo ago
Hi I can help you.
Jochem
Jochem•13mo ago
@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 exactly
Jiggle
Jiggle•13mo ago
im using border only. here are the files
Jiggle
Jiggle•13mo ago
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
Jochem
Jochem•13mo ago
any chance you can make a minimal example in codepen or something?
Jiggle
Jiggle•13mo ago
yes. a minute
Jochem
Jochem•13mo ago
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?
Jiggle
Jiggle•13mo ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Jiggle
Jiggle•13mo ago
please see the code
Jochem
Jochem•13mo ago
seems to work just fine for me? firefox with your border value
No description
Jochem
Jochem•13mo ago
chrome with a higher border value
No description
Jiggle
Jiggle•13mo ago
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
Jochem
Jochem•13mo ago
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 property
Jochem
Jochem•13mo ago
if 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 border
MarkBoots
MarkBoots•13mo ago
it 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)
Jiggle
Jiggle•13mo ago
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
MarkBoots
MarkBoots•13mo ago
you can give it a larger value if you also want to include padding. the value is a minimum
Jiggle
Jiggle•13mo ago
is there technical reason why flex-basis: auto couldn't have taken care of this?
MarkBoots
MarkBoots•13mo ago
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
Jiggle
Jiggle•13mo ago
thank you a lot, @Jochem and @MarkBoots .
Jochem
Jochem•13mo ago
glad to help 🙂
Want results from more Discord servers?
Add your server