Блог

Главная - Вопросы по программированию - Как создать горизонтальный прокручиваемый контейнер, содержащий несколько строк

Как создать горизонтальный прокручиваемый контейнер, содержащий несколько строк

#javascript #html #css #flexbox

#javascript #HTML #css #flexbox

Вопрос:

Я пытался создать сетку данных, в которой панель навигации можно прокручивать горизонтально вместе с содержимым под ней. Однако поведение меняется в двух сценах.

  • Когда самый внешний блок слишком узкий, основная область может прокручиваться горизонтально, однако ширина nav и rows ширина родительского блока ограничены шириной родительского блока, что приводит к нежелательному поведению цвета фона.
    • Это можно решить, установив ширину обоих nav и rows fit-content
  • Когда самый внешний блок слишком широк, поскольку ширина была установлена fit-content , все строки сжимаются с левой стороны вместо заполнения всей строки.
    • Это можно решить, установив ширину обоих nav и rows 100%

Итак, что я должен сделать, чтобы они вели себя правильно в обоих случаях.

Другие решения, которые я пробовал:

  • Однако при использовании flex-row с warp , панель навигации и строки будут находиться в одной строке, когда ширина содержимого слишком мала.
  • Используйте inline-block in nav и inline-flex in rows , поведение такое же, как и выше.
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grid {
            height: 60px;
            width: 200px;
            overflow: auto;
        }
        .subgrid {

        }
        .nav {
            position: sticky;
            top: 0;
            background: #da1039;
        }
        .rows {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background: #00b89c;
        }
        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
        }
        .rowitem {
            border: 1px solid;
            min-width: 20px;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="subgrid">
        <div class="nav">
            <div class="row">
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
            </div>
        </div>
        <div class="rows">
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
        </div>
        </div>
    </div>
</body>
</html> 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grid {
            height: 60px;
            width: 50px;
            overflow: auto;
        }
        .subgrid {

        }
        .nav {
            position: sticky;
            top: 0;
            background: #da1039;
        }
        .rows {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background: #00b89c;
        }
        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
        }
        .rowitem {
            border: 1px solid;
            min-width: 20px;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="subgrid">
        <div class="nav">
            <div class="row">
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
            </div>
        </div>
        <div class="rows">
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

Ответ №1:

На самом деле вы можете объединить оба.

например:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grid-1 {
            height: 60px;
            width: 200px;
            overflow: auto;
        }

        .grid-2 {
            height: 60px;
            width: 900px;
            overflow: auto;
        }
        /* here */
        .nav {
            min-width: fit-content;
            max-width: 100%;
            position: sticky;
            top: 0;
            background: #da1039;
        }
        .rows {
            min-width: fit-content;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background: #00b89c;
        }
        .row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
        }
        .rowitem {
            border: 1px solid;
            min-width: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-1">
        <div class="nav">
            <div class="row">
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
            </div>
        </div>
        <div class="rows">
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
        </div>
        </div>
    </div>
    <div style="height: 20px"></div>
    <div class="grid-2">
        <div class="nav">
            <div class="row">
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
                <div class="rowitem">HHH</div>
            </div>
        </div>
        <div class="rows">
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
            <div class="row">
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
                <div class="rowitem">AAA</div>
            </div>
        </div>
    </div>
</body>
</html>

Комментарии:

1. Это похоже на волшебство, спасибо. Кстати, я видел, что mdn сказал, что минимальная ширина переопределяет максимальную ширину, так в чем смысл max-width .

2. А если sub-grid div необходим?

3. max-width это максимальная ширина, которую может занимать блок.

4. Я имею в виду, действительно ли это работает при наличии минимальной ширины.

5. да, min-width переопределения max-width просто означают: если есть конфликт между двумя — min-width имеет приоритет. что касается subgrid : я не знаю. Я думал, вы предназначаете его для других целей. Я просто поместил его туда, так что это будет полезно, если вы копируете вставку. Это было в вашем исходном примере кода.