CSS-溢出Y元素不会滚动

问题描述

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

我如何需要内容看起来像：div.left-infoboard是左边的区域-页面高度100％。在该块的顶部，有一些信息性的小div。底部有一些街区。在上述div之后，出现了具有许多元素的可滚动块。此块高度需要填充以上div和底部div之间的所有可用空间。

但是我要填充上面和下面的块之间的所有可用空间的这个块不能滚动，并且高度超过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>

解决方法

当您使用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

html less sass sass