Box-sizing, my personal notes
March 04, 20213 mins read
I was hosting an internal sharing where we explore app development frameworks which are not react-native, and our topic was on “Flutter”.
As I was doing my reading on flutter, I found that they’ve mentioned on box-sizing. Being react-native dev, my focus wasn’t completely on CSS, and thus not knowning exactly what
box-sizing does. Fortunately, there’s a css-tricks article on it; always able to trust the internet on answering my questions.
From the article we learn that box-sizing is a CSS property that affects how the final width of the rendered element is calcualted.
This is the traditional (read: initial) design of calculating element sizes are. Final Width = Declared (Width + Padding + Border)
This makes it very simple for any web developer to exactly model what the final width from the given values. However, this may pose a problem if we are trying to design from the out-in form.
If we want an object to completely cover the whole width of the screen, but yet keep some border to itself, we would need to write as such:
CONTENT_WIDTH = SCREEN_WIDTH - PADDING - BORDER; WIDTH = SCREEN_WIDTH;
Now, there’s a solution if we want instead define from the other way round.
box-sizing: box-content WIDTH = SCREEN_WIDTH
And that’s it. The
CONTENT_WIDTH would be automatically calculated.