CSS - calculation error

Question

I have an element uland 5 children <li>.

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul>has a property display: flex. I tried using the calc property in <li>to evenly distribute list items:

calc:(100% / 5);

This gives the desired result and evenly distributes blocks 5 <li>

Now I have added borders to the right of all, but the last child <li>. Therefore, I reduced the total width of all borders combined from the total width <ul>.

calc:((100% - 8px) / 5);

It also worked correctly and uniformly in the size of blocks <li>with borders.

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8px) / 5);
  height: 100%;
  border-right: 0.2px solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Run codeHide result

Now I tried to set the border width in the viewer vwinstead of px, but it gives a different result.

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8vw) / 5);
  height: 100%;
  border-right: 0.2vw solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Run codeHide result

, . ( ). , vw flexbox .

?

EDIT:

, , . , . calc , , , calc ( ). "calc" fix.

Answer 1

calc, li. box-sizing: border-box; prop, border padding, .

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc(100% / 5);
  height: 100%;
  border-right: 2px solid black;
  background: blue;
  box-sizing: border-box;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Hide result

Answer 2

, flex li ul. calc , . , flex.

. :

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, li { list-style: none; }
ul { width: 600px; height: 300px; background: red; display: flex; }
li {
  flex: 1 0 auto;
  border-right: 0.8vw solid black;
  background: blue;
}
li:last-child { border-right: none; }

<ul>
  <li></li><li></li><li></li><li></li><li></li>
</ul>

Hide result

flex dsiplay flex , . :

• flex-grow: 1. li ul.
• flex-shrink: 0. , li .
• flex-basis: auto. , li .

, , calc .

display: block li s. : https://www.w3.org/TR/css-flexbox-1/#flex-items

flex : , ,

@BoltClock , .

, . 0.2px. . , , , 1.

, . . 0.8vw.

, , . , , .

, box-sizing. . , , .

Answer 3

(px): . , , 20 20 . 1980x1200, 200px, 200 .

/ (vw/vh): ( ).

1px = (100/document.documentElement.clientWidth) vw 1px = (100/500) = 0,2vw