Удалить пробел между следующим столбцом в гибком списке

Question

Я создал список из 2 столбцов. Но есть пробел между содержанием. Как я могу удалить это? Я создал скрипку, чтобы проиллюстрировать мою проблему: https://jsfiddle.net/tk83w1L4/

Я пробовал с flex-wrap: wrap; и flex-direction: column; и align-content: flex-start; ни один не работает

.wrapper {
    columns: 2;
    flex-wrap: wrap;
    border: 1px solid #000;
    li {
        display: flex;
        background-color: #f0f0f0;

        &:hover {
            background-color: red;
        }
    }
}

Answer 1

Используйте inline-flex вместо flex. Известны проблемы при использовании элементов уровня блока, но использование встроенного эквивалента устраняет проблему

.wrapper {
  /*flex-wrap: wrap; not needed*/
  border: 1px solid #000;
  columns: 2;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-flex;
  min-width: 100%; /* to make it behave as flex */
  background-color: #f0f0f0;
  padding: 5px;
}

li:hover {
  background-color: red;
}

<div class="wrapper">
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 113</li>
  </ul>
</div>

Кстати, здесь вам не нужен flexbox:

.wrapper {
  border: 1px solid #000;
  columns: 2;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  min-width: 100%; 
  background-color: #f0f0f0;
  padding: 5px;
}

li:hover {
  background-color: red;
}

<div class="wrapper">
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 113</li>
  </ul>
</div>

Answer 2

Вы можете изменить css, чтобы решить проблему

.wrapper {
    flex-wrap: wrap;
    border: 1px solid #000;
    ul {
      columns: 2;
    }
    li {
          display: flex;
          background-color: #f0f0f0;

          &:hover {
            background-color: red;
          }
    }
}