Почему процентный отступ нарушает мой элемент flex?

Question

У меня есть <ul> элемент, который представляет собой гибкий элемент.Этот элемент <ul> содержит несколько элементов <li>, которые не являются гибкими элементами.Когда я добавляю процентные отступы к элементам <li>, элемент <ul> разделяется на несколько строк, как на фотографии:

Когда я устанавливаю фиксированные отступы (например, 30 пикселей)Элемент <ul> отображается в одну строку:

Итак, мой вопрос: Почему процентные отступы заставляют <ul> вести себя таким образом? PS:Мне не нужны решения, чтобы это исправить, мне просто нужно объяснение поведения

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

Как я объяснил в предыдущей аналогичной ситуации , здесь используется некий сложный расчет.Заполнение, используемое с процентным значением, будет зависеть от ширины содержащего блока ^ref , и логически ширина содержащего блока будет определяться его содержимым (или любым фиксированным значением ширины).

В нашем случае мы не можем разрешить процентное значение отступа до вычисления ширины, поэтому сначала рассчитываем ширину на основе нашего содержимого, чтобы получить это:

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>

Затем рассмотрим рассчитанную выше ширину, чтобы вычислить заполнение

После этого дополнение будет логически добавлено.на ширину, которая увеличит общую ширину и создаст разрыв строки.Браузер не вернется, чтобы снова пересчитать ширину ul, потому что у нас будет цикл, поэтому вычисление выполняется только один раз.

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>

Мы можем четко заметить, что в обоих случаях ширина ul точно такая же.

Это выиграло 'Это происходит со значениями пикселей, потому что они являются абсолютными значениями, которые браузер может включить в первоначальный расчет.

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>