css - Bootstrap 4.1 flex 50%-high 滚动列表

Question

尝试创建具有上半部分和下半部分的全屏布局。上半部分应包含一个元素列表，如果超过屏幕高度的一半，则应具有滚动条。

经过一些搜索，我能够使用以下标记获得可行的解决方案:

<div id="app">
  <main role="main" class="container-fluid d-flex">
    <div class="row flex-fill bg-primary" style="min-height:100vh;">
      <div class="col-sm h-100">
        <div class="row h-50 bg-warning" style="overflow:scroll;">
          <div class="col-sm">
            <div>
              <ul class="">
                <li class="">Series 100</li>
                <li class="">Series 200</li>
                <li class="">Series 300</li>
                <li class="">Series 400</li>
                <li class="">Series 500</li>
                <li class="">Series 600</li>
                <li class="">Series 700</li>
                <li class="">Series 800</li>
                <li class="">Series 900</li>
                <li class="">Series 1000</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row h-50 bg-success">
          <div class="col-sm">
            <div>
              test
            </div>
          </div>
        </div>
      </div>
    </div> 
  </main>
</div>

http://jsfiddle.net/0zbcr7mg/4/ (确保输出窗口缩小到整个列表放不下的程度)

但是，一旦我向列表中添加更多元素，布局就会崩溃 - 列表仍然有一个滚动条，但它占据了输出窗口高度的 50% 以上:

http://jsfiddle.net/0zbcr7mg/3/

无论列表中的元素数量如何，我应该对标记进行哪些更改以保持一致的行为？

Answer 1

您只需将 min-height:100vh 行更改为 height:100vh...

http://jsfiddle.net/tokep2gn/

<div id="app">
    <main role="main" class="container-fluid d-flex">
        <div class="row flex-fill bg-primary" style="height: 100vh;">
            <div class="col-sm h-100">
                <div class="row h-50 bg-warning" style="overflow:scroll;">
                    <div class="col-sm">
                        <div>
                            <ul class="">
                                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row h-50 bg-success">
                    <div class="col-sm">
                        <div>
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </main>
</div>