How to get flexbox to include padding in calculations?

Question

Below are two rows.

• First row is two items at flex 1 and one at flex 2.

• Second Row is two items at flex 1.

According to the spec 1A + 1B = 2A

But when padding is included in the calculation the sum is incorrect as you can see in the example below.

---

QUESTION

How to get flex box to include padding into its calculation so the boxes in the example line up correctly?

Answer 1

The solution:

Set margin on the child element instead of padding on your flex item.

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}

<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

---

The problem:

The calculation is done without padding. So; adding padding to the flex element is not giving you your expected width by the spec.

The specific article

For example, the available space to a flex item in a floated auto-sized flex container is:

• the width of the flex container’s containing block minus the flex container’s margin, border, and padding in the horizontal dimension
• infinite in the vertical dimension

Why is the padding not calculated? That's what the spec wants.

Determine the available main and cross space for the flex items. For each dimension, if that dimension of the flex container’s content box is a definite size, use that; if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint; otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

If you subtract the padding and margin from the element's size, you get:

1A + 1B = 2A

However, after you did that, the padding was added to the element. The more elements, the more padding. That's not being calculated in the width, causing your statement to be false.