Javascript-форум - Возможно ли переносить элементы LI на новую строку при выходе за пределы блока?

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Возможно ли переносить элементы LI на новую строку при выходе за пределы блока? (https://javascript.ru/forum/xhtml-html-css/84999-vozmozhno-li-perenosit-ehlementy-li-na-novuyu-stroku-pri-vykhode-za-predely-bloka.html)

Возможно ли переносить элементы LI на новую строку при выходе за пределы блока?

Есть некий список. Чтобы соответствовать логической структуре документа для его форматирования используется соответствующий HTML тег - UL с элементами списка LI. Традиционно списки располагаются сверху вниз, где каждый элемент LI находится на новой строке. В моем конкретном случае это не подходит, поэтому они, с помощью CSS выстроены в горизонтальную линию (см. код).

Проблема в том, что когда элементов списка становится много, они выходят за пределы содержащего их блока и получается полная ерунда. Сейчас в HTML коде это выглядит так:

<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
width: 20%;
border: 1px solid #ccc;
}

.arch {
display: inline-block;
}
.arch li {
display: inline;
margin-left: 10px;
}

</style>
<title>Example</title>
</head><body>

<div class="test1">
<p class="arch">List:</p>
<ul class="arch">
<li><a href="/21/">21</a></li><li><a href="/20/">20</a></li><li><a href="/19/">19</a></li><li><a href="/18/">18</a></li><li><a href="/17/">17</a></li><li><a href="/16/">16</a></li><li><a href="/15/">15</a></li><li><a href="/14/">14</a></li><li><a href="/13/">13</a></li><li><a href="/12/">12</a></li><li><a href="/11/">11</a></li><li><a href="/10/">10</a></li><li><a href="/9/">9</a></li><li><a href="/8/">8</a></li><li><a href="/7/">7</a></li><li><a href="/6/">6</a></li><li><a href="/5/">5</a></li><li><a href="/4/">4</a></li><li><a href="/3/">3</a></li><li><a href="/2/">2</a></li><li><a href="/1/">1</a></li>
</ul>

</div>
</body></html>

На картинке (для наглядности граница блока выделена рамкой) это выглядит так:

а должно выглядеть так:

Поскольку дизайн адаптивный и ширина DIV на разных устройствах разная, то и переносы строки могут быть в разных местах. Главное, чтобы они не выходили за границу DIV'а и выстраивались на 2-ю, 3-ю и 100500-ю строчку в зависимости от длины списка.

javascript_pupil,

<!DOCTYPE html>
<html>

<head>
    <style>
        .test1 {
            width: 20%;
            border: 1px solid #ccc;
        }

        .arch {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
        }

        .arch li {
            margin-left: 16px;
        }
    </style>
    <title>Example</title>
</head>

<body>
    <div class="test1">
        <p class="arch">List:</p>
        <ul class="arch">
            <li><a href="/21/">21</a></li>
            <li><a href="/20/">20</a></li>
            <li><a href="/19/">19</a></li>
            <li><a href="/18/">18</a></li>
            <li><a href="/17/">17</a></li>
            <li><a href="/16/">16</a></li>
            <li><a href="/15/">15</a></li>
            <li><a href="/14/">14</a></li>
            <li><a href="/13/">13</a></li>
            <li><a href="/12/">12</a></li>
            <li><a href="/11/">11</a></li>
            <li><a href="/10/">10</a></li>
            <li><a href="">9</a></li>
            <li><a href="">8</a></li>
            <li><a href="">7</a></li>
            <li><a href="">6</a></li>
            <li><a href="">5</a></li>
            <li><a href="">4</a></li>
            <li><a href="">3</a></li>
            <li><a href="">2</a></li>
            <li><a href="">1</a></li>
        </ul>
    </div>
</body>

</html>

Очень круто! Спасибо! Я пробовал с "flex", но видимо что-то не дописал. Самое главное, что сохраняется логическая структура документа, а именно: список. Некоторые на это плюют, но мне кажется это важным т.к. "чем дальше в лес", тем больше влияние это будет оказывать на ранжирование, ведь хоть и смотрит на страницу человек, выдачу ранжируют алгоритмы.

Еще один вопрос: возможно ли к этой замечательной конструкции каким-то образом "прикрутить" overflow? Чтобы, например, 3-я или 4-я строчка плавно или не плавно становилась невидимой. Строчек этих в реальности может быть очень много. Открыть её (и все остальные), при необходимости, можно будет с помощью javascript типа:

*.style.display = "block"

если кто-то захочет ~~"огласите весь список пжалста" (с)~~ просмотреть весь список. :) Непонятно, как это "overflow" привязывать к строкам?

javascript_pupil,
ищите что-то подобное https://javascript.ru/forum/misc/849...tml#post550561