css - Flex 页脚不随下拉菜单移动

Question

我在使用滚动条展开页面的下拉菜单时遇到问题，但页面底部的页脚没有向下移动。

示例 JSFiddle:https://jsfiddle.net/fmoctax3/

$('.ui.dropdown').dropdown();

html,
body {
  height: 100vh;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column;
}

.main {
  flex: 1 1 auto;
  background: green;
}

.footer {
  background: orange;
}

.ui.dropdown {
  margin-left: 50vw;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>


<div class="main">
  <div class="ui floating dropdown">
    <label class="ui button">Dropdown</label>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
  </div>
</div>
<div class="footer">
  stuff<br>stuff<br>
</div>

为什么会发生这种情况？如何让页脚和主体也展开？

Answer 1

我可以建议您制作可滚动下拉菜单的一个选项，因为如果您有一个非常大的下拉菜单，这不是正确的 UI。

只需添加下面的 css，

.scroll{
  max-height:100px;
  overflow-y:auto;
  width:150px;
}

并将“滚动”CSS 应用于 div“菜单”

 <div class="menu scroll">