Question

我已经阅读了有关在 flexbox 中滚动的各种问题，但我的版本似乎比我所看到的要复杂一些。我有一个使用 flexbox 的编辑器，它包含一个带有许多可滚动组件的工具栏，这本身就可以正常工作。但是，在实时站点上，它包含在 display:flex 的父级中（出于我不会介绍的原因，但此编辑器不是页面上的唯一组件），并且一旦将编辑器放入这个 flex parent 的可滚动区域变为全宽，将整个页面推得比它应该的宽度要宽。

在此代码段中，所有“Thumb Example”元素都应该在其父级 .image-thumbs-container 内滚动，并遵守页面的整体 width:800px 限制，但它们布局并推动其父级更宽。但是，如果您关闭 display:flex 元素的 .product-page，滚动就会起作用。我构建了这个仅使用编辑器的简化示例来演示问题，它运行良好，但我花了一段时间才意识到它是导致错误的父元素。

[编辑] 此代码段在 StackOverflow 中可能无法按预期工作，请查看相同的 Pen：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 和向下的元素来解决此滚动问题？

Answer 1

您只需在 .editor 上设置 100% 宽度即可解决此问题。

因为父级已经有了 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>

Answer 2

将 width: 100% 添加到您的 .editor 元素。

或者，万一您确实需要，将 max-width: 800px 添加到以下任何元素....editor、.uploads-container、或 .uploads-container

嵌套 flexbox 布局导致可滚动区域行为异常

2 个答案: