Obsidian Obsidian - 5 months ago 8
CSS Question

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

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?



.Row{
display:flex;
}
.Item{
display:flex;
flex:1;
flex-direction:column;
padding:0 10px 10px 0;
}
.Item > div{
background:#7ae;
}
.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>




Answer

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 supported by the spec.

The specific article

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

Comments