Why does percentage padding break my flex item?

Question

I have <ul> element which is a flex items. This <ul> element contains several <li> elements which are not flex items. When I add percentage paddings to <li> elements then <ul> element is split in several lines like in the photo:

When I set fixed paddings (like 30px) the <ul> element is displayed in one line:

So, my question is: Why percentage paddings make <ul> behave this way? P.S: I don't need solutions to fix it, I just need an explanation of the behaviour

li {
  display: inline-block;
  padding: 0 5%;
  /* padding: 0 30px; */
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

Answer 1

As I explained in a previous similar situation there is a kind of complex calculation involved here. Padding used with percentage value will be relative to the width of the containing block^ref and logically the width of the containing block will be defined by its content (or any fixed width value).

In our case, we cannot resolve percentage value of padding before calculating the width, so we first caclulate the width based on our content to obtain this:

console.log(document.querySelector('ul').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

Then we will consider the above calculated width in order to calculate the padding

After that, the padding will logically be added to the width which will increase the overall width and create the line break. The browser won't go back to re-caclulate the width of the ul again because we will have a cycle, so the calculation is done only once.

console.log(document.querySelector('ul.pad').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li {
  padding:0 0.5%; /*any small value will create the issue*/
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:5px;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

We can clearly notice how in both case the width of the ul is exactly the same.

This won't happen with pixel values because they are absolute values that the browser can include in the initial calculation.

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li{
  padding:0 30px; 
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>