CSS - overflow-y 元素不能滚动

Question

我需要在左侧导航栏中制作 y 轴可滚动块。但我遇到了这个问题 - overflow-y 元素无法滚动。

我如何需要内容看起来像：div.left-infoboard 是左侧块 - 页面的 100% 高度。在这个块的顶部有一些信息小divs。在底部有太多的块。在上面divs 之后有很多元素的可滚动块。这个块高度需要填充上面divs 和底部divs 之间的所有空闲空间。

但是这个块，我想填充上面块和下面块之间的所有空闲空间，它不可滚动并且高度超过了 100%。

---

Codepen 沙箱（包含所有样式和 html）： https://codepen.io/car1ot/pen/rNerLbZ

---

短代码：

CSS（scss）代码：

body {padding:0;margin:0;}

div.left-infoboard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100vh;

    div.bets {
        div.all-bets {
            div.bet-item {  height: 100px; }
        }
    }

    div.advanced {
        margin-top: 15px;
    }
}

HTML 代码：

        <div class="left-infoboard">
            <div class="bets">
                 <!-- This is above section -->
                 ...

                 <!-- This is scrollable section, which I need 100% fit free space between -->
                <div class="all-bets">
                    <div class="bet-items">
                            <div class="bet-item">
                                ...
                            </div>
                            <div class="bet-item">
                                ...
                            </div>
                            <div class="bet-item">
                                ...
                            </div>
                    </div>
                </div>
            </div>

            <!-- This is below section -->
            <div class="advanced">
                ...
            </div>
        </div>

Answer 1

当你有一个 flex 布局并且你希望一个大子元素可以垂直滚动时，你应该在所有子元素和大子元素上设置这个样式：

{
  display: flex; // use the flex layout
  flex-direction: column; // column layout
  flex: 1; // full height
  overflow: hidden; // don't expand the height when there is an overflowed child
}

See the fixed version | Minimal example