Вложенный макет flexbox приводит к неправильному поведению области прокрутки

ProgramBox

Вложенный макет flexbox приводит к неправильному поведению области прокрутки

Post author:admin
Запись опубликована:23 декабря, 2022
Post category:Вопросы по программированию

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Я читал различные вопросы о прокрутке внутри flexbox, но, похоже, у меня есть немного более сложная версия того, что я видел. У меня есть редактор, который использует flexbox и содержит панель инструментов со многими компонентами, которые можно прокручивать, и это прекрасно работает само по себе. Однако на живом сайте он заключен в родительский элемент, который display:flex (по причинам, в которые я не буду вдаваться, но этот редактор не единственный компонент на странице), и как только редактор помещается в этот гибкий родительский элемент, его прокручиваемая область становится полной ширины, расширяя всю страницу шире, чемтак и должно быть.

В этом фрагменте предполагается, что все элементы «Thumb Example» могут прокручиваться в пределах их родительского .image-thumbs-container элемента, соблюдая общий width:800px лимит страницы, но они размещают и расширяют свой родительский элемент шире. Но, если вы отключите display:flex .product-page элемент, прокрутка будет работать. Я создал этот упрощенный пример только редактора, чтобы продемонстрировать проблему, и он работал нормально, мне потребовалось некоторое время, чтобы понять, что это родительский элемент, который вызывает ошибку.

[Редактировать] Этот фрагмент может работать не так, как ожидалось, в StackOverflow, пожалуйста, посмотрите на это идентичное перо: https://codepen.io/neekfenwick/pen/NWbpqZg

 body {
    background-color: lightgrey;
}
.page-container {
    width: 800px;
    background-color: white;
}

.product-page {
    display: flex; /* Disable me to make scrolling work */
    flex-wrap: wrap;
}
.uploads-container {
    text-align: left;
    white-space: nowrap;
    padding: 5px;
    border: 1px solid black;
    display: flex;
    box-sizing: border-box;
}

.uploads-scroller {
    overflow-x: scroll;
    flex: 1 1 auto;
    overflow-y: hidden;
}
.image-thumbs-container {
    border: initial;
}
.image-thumb {
    display: inline-block;
    width: 100px;
    border: solid 2px grey;
    border-radius: 5px;
    margin-right: 2px;
    vertical-align: top;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="mock.css">
    <title>Mockup</title>
</head>
<body>
    <div class="page-container">
        <div class="product-page">
            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>

            <div class="editor">
                <div class="uploads-panel">
                    <div class="uploads-container">
                        <div class="uploads-file-container">File Upload<br>Widget Goes<br>Here</div>
                        <div class="uploads-scroller">
                            <div class="image-thumbs-container">
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="workspace">
                    <h2>Some complicated workspace content goes here.</h2>
                </div>
            </div>

            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
        </div>
    </div>
</body>
</html>

Развернуть фрагмент

Поэтому, пожалуйста, имейте в виду, что я не хочу ничего изменять над .editor div. Большая часть нашего сайта основана на .product-page CSS. Я могу рассмотреть это, но возможно ли исправить эту проблему с прокруткой, только изменив элементы из .editor div и вниз?

Ответ №1:

Вы можете исправить это, просто установив значение 100% width .editor .

Поскольку у родительского элемента уже есть flex-wrap: wrap , это должно сработать для вас просто отлично. Содержимое под редактором будет просто перенесено под него.

 .editor { /* <-- add this */
  width: 100%;
}

body {
    background-color: lightgrey;
}
.page-container {
    width: 800px;
    background-color: white;
}

.product-page {
    display: flex; /* Disable me to make scrolling work */
    flex-wrap: wrap;
}
.uploads-container {
    text-align: left;
    white-space: nowrap;
    padding: 5px;
    border: 1px solid black;
    display: flex;
    box-sizing: border-box;
}

.uploads-scroller {
    overflow-x: scroll;
    flex: 1 1 auto;
    overflow-y: hidden;
}
.image-thumbs-container {
    border: initial;
}
.image-thumb {
    display: inline-block;
    width: 100px;
    border: solid 2px grey;
    border-radius: 5px;
    margin-right: 2px;
    vertical-align: top;
}

 <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="mock.css">
    <title>Mockup</title>
</head>
<body>
    <div class="page-container">
        <div class="product-page">
            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>

            <div class="editor">
                <div class="uploads-panel">
                    <div class="uploads-container">
                        <div class="uploads-file-container">File Upload<br>Widget Goes<br>Here</div>
                        <div class="uploads-scroller">
                            <div class="image-thumbs-container">
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="workspace">
                    <h2>Some complicated workspace content goes here.</h2>
                </div>
            </div>

            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
        </div>
    </div>
</body>
</html>

Развернуть фрагмент

1. Фантастика, это решает проблему. На самом деле у меня было несколько родительских display: flex элементов, поэтому мне пришлось устанавливать width: 100% в двух местах, но все это было в контексте контейнера этого редактора, и мне не нужно было связываться с .product-layout уровнем, так что все хорошо. Большое вам спасибо!

Ответ №2:

Добавьте width: 100% в свой элемент .editor.

Или, на всякий случай, если вам действительно нужно, добавьте max-width: 800px к любому из следующих элементов… .editor, .uploads-container или .uploads-container

1. Спасибо @BradTheBluefish .. @cjl750 добрался туда немного раньше вас, поэтому я принял их ответ, но ваш тоже на деньги. Очевидно, что установка дочерним элементам фиксированной ширины не является предпочтительной, когда все должно наследовать ширину от самого верхнего уровня макета страницы, но width: 100% трюк сработал. Теперь мне просто нужно выяснить, почему это сработало 🙂