максимальное значение flex-grow или усадочное расстояние для пространства между элементами

Question

Я строю навигацию на основе двух списков в одной строке. Все элементы в двух списках должны иметь интервалы между собой, но не более 25px.

Проблема с flex-grow: Если я использую flex-grow, элементы становится больше, чем их собственная ширина + 25px, потому что места достаточно.

Проблема с margin-right: Если контейнер меньше, то margin-right 25px не уменьшается, тогда элементы будут разбивать строки, а не уменьшать свои поля.

Возможное решение: использовать div между каждым элементом, задав ему flex-grow:1 и max-width:25px.

Есть ли другой способ без дополнительных html?

Вот кодекс, показывающий проблему:

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul,
.container,
.container2 {
  display: flex;
  justify-content: space-between;
}

.container,
.container2 {
  border: 1px solid red;
  width: 500px;
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}

.container ul.first {
  flex-grow: 1;
  /* this works, but each element should only grow by 25px */
}

.container ul.first,
.container2 ul.first {
  margin-right: 30px;
}

.container2 ul.first li {
  margin-right: 25px;
  /* this works, but should be reduced if not enough space */
}

<h2>Example 1: flex-grow on li</h2>
<p>Problem: the items get too big, should be max 25px spacing</p>
<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

<h2>Example 2: margin-right on li</h2>
<p>Problem: the spacing is not reduced on smaller containers</p>
<div class=container2>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>

Answer 1

Одна идея состоит в том, чтобы рассмотреть использование псевдоэлемента и display:contents

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul{
  display: inline-flex;
  max-width:100%;
}

.container {
  border: 1px solid red;
  margin-bottom: 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin: 0 0 5px 0;
}


.container ul.first{
  margin-right: 30px;
  max-width:calc(100% - 30px);
}

ul li:not(:last-child) {
  display:contents;
}
ul li:not(:last-child)::after {
   content:"";
   width:25px;
}

<div class=container>
  <ul class=first>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
  </ul>
  <ul class=second>
    <li>first</li>
    <li>second</li>
  </ul>
</div>