How to get flexbox to include padding in calculations with CSS?

To get flexbox to include padding in calculations with CSS, we use flex-grow with padding.

For instance, we write

.item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

to make the elements with class item a flex container with display: flex;.

We add flex-direction: column; to make the flex direction vertical.

We add flex: 1; to make it stretch with flex-grow with padding being taken accoount in the height calculation.

And then we add padding with padding: 0 10px 10px 0;