Нежелательное переполнение столбцов CSS

Есть несколько исправлений, либо добавьте display: block к ul, как это

 ul {
    display: block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    /* margin-right: 170px; */
}

, либо измените margin-right на% или vw вместо px, как это

  ul {
    display: inline-block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    margin-right: 30%;
}

Если вы не возражаете, чтобы каждый <li> находился в отдельной колонке, я думаю, что это может сработать:

ul {
  display: inline;
  ...
}

li {
  display: inline-block;
  ...
}

Обновленный ответ для достижения ваших целей с использованием CSS Grid inline-grid для создания встроенной сетки уровней:

grid-template-rows настроен на повторение максимум двух строк с 1fr каждый. [тысяча сто двадцать девять]

grid-template-columns настроен на повторение необходимого количества столбцов auto с шириной 35px.

grid-auto-flow установлен на column, чтобы иметь алгоритм автоматического размещения сетки для заполнения каждого столбца по очереди, добавляя новые столбцы по мере необходимости, сохраняя при этом максимум две строки.

grid-column-gap использовался для добавления отступов между столбцами для отображения тех же результатов, что и на предоставленных изображениях.

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(auto, 35px);
  grid-auto-flow: column;
  grid-column-gap: 10px;
  align-items: center;
  list-style: none;
  font-size: 10px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Надеюсь, что это решит вашу проблему!

Если ваша цель - получить максимум из 3 пунктов columns, как показано на изображениях, я считаю, что свойство, которое вам нужно изменить, это:

column-width: 35px - columns: auto 3 , если вы хотите column-width каждого столбца установить на auto.

или

column-width: 35px - columns: 35px 3 , если вы хотите указать column-width для каждого столбца.

Это объяснение того, что делает свойство columns:

Свойство CSS columns устанавливает ширину столбца и количество столбцов элемента. - MDN - столбцы css

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

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  columns: auto 3;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

Надеюсь, это поможет!

Первоначальный ответ (прежде чем я понял, о чем вы спрашиваете):

В зависимости от того, как вы хотите <li> заказать, вы можете использовать columns [ 1117] ...

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  columns: 2 0px;
}

li {
  background: #9eff80;
  margin: 1px;
  padding: 2px;
  opacity: 0.7;
  width: 100%;
  break-inside: avoid;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-flex;
  padding: 0;
  list-style: none;
  font-size: 10px;
  flex-wrap: wrap;
  line-height: 5em;
  vertical-align: middle; 
     /* see also -webkit-baseline-middle
                 text-bottom
                 text-top */
}

li {
  line-height: 1em;
  flex: 0 1 auto;
  margin: 1px;
  width: calc(50% - 2px); /*deduct margin*/
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
  box-sizing: border-box;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

let uls = document.querySelectorAll('ul');
for(let i = 0; i < uls.length; i++) {
  let count = uls[i].children.length;
  if (count && count > 2) {
    for (j = 0; j < count/2; j++) {
      let parent = uls[i].parentElement,
          newUl = document.createElement('ul');
      for (k = 0; k < 2; k++) {
        li = uls[i].querySelector(':first-child');
        if (li) {
          newUl.appendChild(li);
          parent.insertBefore(newUl, uls[i]);
        }        
      }
    }
  }
}

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  min-height: 35px;
}

li {
  background: #9eff80;
  padding: 2px;
  margin: 1px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.   I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.
</div>

$('ul').each(function() {
  while($('li', this).length > 2) {
    let newUl = $('<ul/>'), i = 0;
    while(i < 2) {
      $('li', this).eq(0).appendTo(newUl); 
      i++;
    }
    newUl.insertBefore($(this));
  }
})