How to get flexbox to include padding in calculations?

box-sizing 101: Getting to know content-box and border-box

Default vs custom box sizing

By default, elements use box-sizing: content-box;, which means padding and borders get piled onto the element's width and height. The result? Possible misalignments and the risk of items spilling over when sizes are set directly:

/* Padding? Border? No worries, they're all within the box */
* {
  box-sizing: border-box;
}


Padding and item alignment in a flexbox

Including padding can potentially disrupt flex item alignment and justify-content settings. Since available space shrinks with added padding, flex items can be kicked out of their expected positions:

.flex-item > .content-wrapper {
  padding: 20px; /* Apply padding to wrapper instead of flex item */
}


In such a case, wrapper elements can come to the rescue. Wrap the flex item's content in another element and apply padding there to prevent misalignment.

Customizable flex item sizing with padding

flex-grow and flex-basis combine for precise control over the sizing of flex items. flex-basis takes care of the initial size, and flex-grow allocates additional space based on the total box size:

.flex-item {
  flex-grow: 1;    /* I'll take whatever space you got */
  flex-basis: calc(50% - 40px);  /* Let's not forget the padding */
  padding: 20px;   /* Ah, that's more like it */
}


Picking the right approach: To flexbox or to CSS Grid?

While flexbox has its strengths, CSS Grid may be a more suitable option when the precise control over item alignment and spacing is a priority:

Best practices for padding in flex children

Margin for breathing room

Applying margins on child elements can create a similar visual spacing as padding on flex items without interfering with flex calculations:

.child {
  margin: 20px; /* Like a personal bubble */
}


The Padding Imposter

Alternatively, you can make use of a pseudo-element to conjure up the effect of padding while keeping the size in check:

.flex-item::after {
  content: '';
  display: block;
  height: 20px; /* The Padding that's not there 😲 */
}


Keeping flex items responsive with padding

Adopting a combo of relative units like em or vw for padding and media queries can keep your content traffic under control on smaller screens:

@media (max-width: 600px) {
  .flex-item {
    padding: 2vw; // Flexible padding for smaller screens
  }
}
