ul li список в несколько столбцов ( родительский ul не расширяется )

Question

Кучу времени вожусь и не получается в подменю выравнивать все элементы вертикально а не горизонтально:

1 4
2 5
3 6

использовал конструкцию ul li и flex но родительский див в не какую не хочет растягиваться под размер контента. Цель добиться 2-3-4 столбцов в подменю примерно таким образом :

.desctop-menu {
  width: 280px;
  background: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  -moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
}

.categories-list {
  margin: 0;
  padding: 20px 0;
  list-style-type: none;
}

.categories-item {
  display: flex;
  padding: 0 20px;
}

.categories-item:hover {
  background-color: #f2f2f2;
}

.categories-item img {
  margin: 20px 20px 20px 0;
}

.categories-item:after {
  content: "";
  display: block;
  width: 10px;
  height: 60px;
  margin-right: -30px;
}

.categories-info {
  margin: auto 0;
  width: 100%;
}

.categories-info a {
  display: block;
  text-decoration: none;
  color: black;
}

.categories-info span {
  color: #b9b9b9;
  font-size: 0.8rem;
}

.subcategories-item {
  display: block;
  /** display: none **/
  position: absolute;
  margin: -10px 0 0 270px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  -moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  position: absolute;
  padding: 32px;
  z-index: 1000;
}

.subcategories-item li {
  page-break-inside: avoid;
  break-inside: avoid;
}

.subcategories {
  max-height: 236px;
}

<div class="desctop-menu">
  <ul class="categories-list">

    <li class="categories-item">
      <img src="https://c.dns-shop.ru/thumb/st1/fit_width/25/25/e805e9a66d0c74fcb2712ef9d47ce7b8/q100_a9172f7a3408f5119fb3803bf302f76a5ad3ac5da4f03600cb3b2af42df98a78.png" />
      <div class="categories-info">
        <a href="#">Бытовая техника</a>
        <span>для дома и офиса</span>
      </div>
      <ul class="subcategories-item">
        <div class="subcategories">
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>

          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>

        </div>
      </ul>
    </li>



  </ul>
</div>

Answer 1

Flex имеет проблемы с разворачиванием ширины при использовании flex-direction: column. Поэтому имеет смысл использовать grid.

Добавьте в конец файла стиля, это должно решить вашу проблему:

.subcategories {
    max-height: unset;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
}

.subcategories span {
    display: block;
}

БЛОГ НА HUSL

ul li список в несколько столбцов ( родительский ul не расширяется )

Ответы (1 шт):