Не влезает подменю в сайдбаре, как можно решить?

Question

[rinaz22]

Всем привет! Есть сайдбар и там каталог с подменю. Если количество подменю много, он не влезает и уходит вниз. Я хотел сделать их в ряд с помощью display flex, но если указать ширину auto, то они уходят за пределы сайта, а не переходят на новую строку. Как это можно решить? Может есть подобный пример?
Вот код:

<ul>
  <li>
    <a href="#1">123</a>
    <ul class="subcategory w-100">
	<li><a href="#">222</a></li>
        <li><a href="#">222</a></li>
    </ul>
  </li>
</u>

.subcategory {
    height: auto;
    top: 0;
    opacity: 1;
    border-top: 1px solid #bdbdbd;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.categories li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
}

Comments

[Alex]

Я бы сказал, что вам нужен flex-wrap. Но вы не добавили пример, так что — хз

[rinaz22]

Alex, Добавил код

[Alex]

rinaz22, В песочницу, пожалуйста. От ныне и всегда в вопросах — ссылка на пример с проблемой.

[rinaz22]

Alex, https://jsfiddle.net/y12aL4wj/

[Ankhena]

rinaz22, Пример огонь!
А теперь по-нормальному.
- Где много подменю? Где можно увидеть неустраивающее вас поведение?
- Какое поведение вам нужно?

[rinaz22]

Ankhena, вот весь код
https://jsfiddle.net/y12aL4wj/

[Ankhena]

rinaz22, я уже написала, что код - огонь.
У меня все влезает.
Возвращаемся к предыдущим вопросам.
Глядишь, пара суток и разберемся, что не так.

[rinaz22]

Ankhena, а вот щас без прокрутки тоже все лезет?
https://jsfiddle.net/c1wn8ozu/

[Ankhena]

rinaz22, уже лучше.
И что вы хотите с этим делать? Как этот блок должен себя вести, если не влезает?

[rinaz22]

Ankhena, Вы вопрос читали?

Если количество подменю много, он не влезает и уходит вниз. Я хотел сделать их в ряд

[Ankhena]

rinaz22, да не вопрос, вот в строку: https://jsfiddle.net/gn7mhsbq/

Теперь вернемся к предыдущему пункту )))) Я вот не уверена, что вы хотите этого.

Чуть легче будет если добавить ширину для выпадашки и flex-wrap https://jsfiddle.net/gn7mhsbq/1/

К чему я веду?
К тому, что на js нужно проверять сколько элементов в выпадашке, сколько есть доступного места и уже в зависимости от этого задавать класс для позиционирования и размеров выпадашки.

[rinaz22]

Ankhena, Спасибо! Вот это решение меня устраивает: https://jsfiddle.net/gn7mhsbq/1/
Ну еще я с этим списком почти уже 2 дня мучаюсь, поэтому так тоже можно )))