如何在不扩展父容器的情况下将非常大的元素放入 flexbox 中？

Question

我有一个弹性布局。在其中一个 flex 元素中，有一个高度为 2500px 的元素。它需要可滚动，但也要占用所有可用空间。

问题在于使用 flex 时，long 元素会使其父元素溢出到屏幕之外。它需要适应父元素而不会溢出或使其父元素垂直变长。

这里是代码框：https://codesandbox.io/s/vibrant-elbakyan-ro7jp?file=/index.html

编辑：是的，Andrei Voicu 的回答是正确的。

但是，我认为这个问题的解决方案可以解决我的问题，但我过于简单化了这个问题，它并没有解决我的具体情况。

如果您想查看我需要的确切布局，这里是带有已解决 css 的代码框：

https://codesandbox.io/s/gifted-currying-uh67e?file=/index.html

Answer 1

Flexbox 是不够的，你可以结合使用 flexbox 和定位来满足你的需要。

1. 使用 flexbox 设置 overflow 容器的尺寸
2. 在overflow 容器上设置position: relative
3. 添加一个与overflow 容器一样多的包装子，使用position: absolute 并具有overflow: auto
4. 此容器内的内容会溢出，同时与 flexbox 布局保持一致

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 1rem;
}

.container {
    display: flex;
    height: 100%;
    border: 1px solid;
}

.overflows {
    flex: 1;
    position: relative;
}

.wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    overflow: auto;
}

.content {
    height: 300vh; // scrollable
}

.side {
    flex-shrink: 0;
    width: 200px;
    background-color: honeydew;
}

<div class="container">
    <div class="overflows">
        <div class="wrapper">
            <div class="content">
                scroll me
            </div>
        </div>
    </div>
    <div class="side">
        side content
    </div>
</div>