CODEWITHSUNDEEP
cssfrontendflexbox
Chris
Chris

Reputation: 159

Is resetting box-sizing to border-box relevant when using flexbox?

I'm an Interaction Designer who occasionally dabbles in a bit of frontend experimentation, but I'm most definitely not a dev so apologies is this question isn't well phrased or relevant. I have recently been enjoying resetting the box-sizing as per the suggestion in this article but also was going to start playing with the flexbox property. As I've read that flexbox is a completely different take on the box model I was wondering if it made the notion of resetting box-sizing irrelevant or a bad idea?

Upvotes: 1

Views: 714

Answers (1)

Paulie_D
Paulie_D

Reputation: 115288

Not really...the two aren't really related.

flexbox still uses values and you want those values to mean what they say.

You might hav a div with a max/min width which has padding and you want that value to be right.

flexbox doesn't mean that box-sizing is automatic or not a factor.

From the Spec

For all other values, flex-basis is resolved the same way as width in horizontal writing modes [CSS21]: percentage values of flex-basis are resolved against the flex item’s containing block, i.e. its flex container, and if that containing block’s size is indefinite, the result is the same as a main size of auto. Similarly, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing

See:

.wrap {
  display: flex;
  margin-bottom: 10px;
}
.content {
  background: red;
  height: 75px;
  flex: 0 0 150px; /* max-width 150px */
  padding: 0 25px;
}
.boxy .content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="wrap boxy">
  <div class="content"></div>
</div>

<div class="wrap">
  <div class="content"></div>
</div>

Upvotes: 1

Related Questions