Перенос li во второй столбец, если ul больше определённой высоты

Question

Необходимо отверстать блок, по следующей логике: есть футер, в который должны выводиться категории и подкатегории при последующей посадке на движок. Соответственно, если категорий будет больше чем условно 10, они должны переносится на следующий столбец.

Я задал display-wrap:wrap, задал максимальную высоту, но получилось вот так:

Подскажите, что делаю не так, и как это исправить. На остальные несостыковки по дизайну не обращайте внимания) Мой код:

    footer {
     font-family:'Roboto';
     font-size:16px; }

    .container {
      width:100%;
      max-width:128rem;
      margin: 0 auto; }

    .footer__top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding-top: 3rem;
      padding-bottom: 3rem;
      border-bottom: 2px solid #292c31; }

    .footer__top-catalog ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: 22rem; }

    .footer__top-catalog h3 {
      padding-bottom: .8rem;
      width: 100%;
      font-weight: 500;
      text-transform: uppercase;
      border-bottom: 1px solid #292c31; }

    <div class="footer__top container">
            <div class="footer__top-catalog">
                <h3>Название компании</h3>
                <ul>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Доставка и оплата</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
            <div class="footer__top-catalog">
                <h3>кровельные материалы</h3>
                <ul>
                    <li><a href="#">Композитная черепица </a></li>
                    <li><a href="#">Металлочерепица </a></li>
                    <li><a href="#">Профнастил</a></li>
                    <li><a href="#">Мягкая кровля</a></li>
                    <li><a href="#">Водосточные системы</a></li>
                    <li><a href="#">Рулонные материалы</a></li>
                    <li><a href="#">Гидроизоляция, пароизоляция</a></li>
                    <li><a href="#">Фальцевая кровля Grang Line</a></li>
                    <li><a href="#">ОSB kalevala</a></li>
                    <li><a href="#">Композитная черепица </a></li>
                    <li><a href="#">Металлочерепица </a></li>
                    <li><a href="#">Профнастил</a></li>
                    <li><a href="#">Мягкая кровля</a></li>
                    <li><a href="#">Водосточные системы</a></li>
                    <li><a href="#">Рулонные материалы</a></li>
                    <li><a href="#">Гидроизоляция, пароизоляция</a></li>
                    <li><a href="#">Фальцевая кровля Grang Line</a></li>
                    <li><a href="#">ОSB kalevala</a></li>
                </ul>
            </div>
            <div class="footer__top-catalog">
                <h3>фасадные материалы</h3>
                <ul>
                    <li><a href="#">Фасадные системы</a></li>
                    <li><a href="#">Сайдинг</a></li>
                    <li><a href="#">Фасадные кассеты</a></li>
                    <li><a href="#">Линеарные панели</a></li>
                </ul>
            </div>

            <div class="footer__top-catalog">
                <h3>Утеплители</h3>
                <ul>
                    <li><a href="#">Утеплители ТехноНИКОЛЬ</a></li>
                    <li><a href="#">Утеплители ISOVER</a></li>
                    <li><a href="#">Утеплители ROCKWOOL</a></li>
                    <li><a href="#">Утеплители Пеноплекс</a></li>
                    <li><a href="#">Утеплители ISOROC</a></li>
                    <li><a href="#">XPS CARBON</a></li>
                </ul>
            </div>
        </div>

БЛОГ НА HUSL

Перенос li во второй столбец, если ul больше определённой высоты

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