Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics Write Smart and Efficient CSS with Sass Create a Function for Flexbox Layout

Martin Park
Martin Park
12,792 Points
Posted by Martin Park
Martin Park
12,792 Points

Does "box-sizing: border-box;" work with Flexbox?

In this video Guil uses functions to work out the correct width percentages of his columns in Flexbox to stop his site breaking when margins are added.

Is he simply demonstrating what can be done with functions? Would box-sizing: border-box; have the same effect?

2 Answers

David Kanwisher
David Kanwisher
9,751 Points
David Kanwisher
David Kanwisher
9,751 Points

Yes, border box works as it should

Border box says that when we set a width of something we MEAN the width from the left border to the right border. (rather than the content area of the box model)

Given this scenario:

  1. enable box-sizing: border-box
  2. have a container with 2 boxes inside of it
  3. set the width of those child boxes to 50%
    The boxes will each take up half of the container, because from border to border, they fit.

But margin lives outside of the border!

Thinking about it another way, in this same scenario We have maxed out all the possible space we can occupy in our container, we are LITERALLY at 100% capacity
Again, since border-box is a measurement from border to border and NOT from margin to margin, we have not allotted any additional space for margin, and it must break to a new line if we were to add any margin

ibrahim Warsame
ibrahim Warsame
7,803 Points
ibrahim Warsame
ibrahim Warsame
7,803 Points

Hi Martin Park.

There is a great stack exchange post, that explains this topic deeply. Visit this link to see the post https://stackoverflow.com/questions/37353792/why-flex-basis-does-not-respect-box-sizingborder-box

Hope this helped :)

Alex Thomas
Alex Thomas
4,247 Points
Alex Thomas
Alex Thomas
4,247 Points

didn't really answer the question as stack overflow can be hit or miss. I too am wondering about this. A simple yes or no would be really helpful.