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;