溢出-y问题，100％高度

Question

我正在创建一个移动友好的网络应用程序，我们在其中显示一个包含登录用户详细信息的弹出窗口。

我正在尝试使用溢出来创建更自然的用户界面，但是溢出属性似乎没有按预期工作。

我想要滚动的div位于一个固定位置作为模态类型接口的区域内，此div中还有其他各种元素。

请查看下面的代码，我已经在摘录下面提供了整个部分，以便您可以看到它所处的环境类型。

<div class="notesDisplay">
  <div id="contain">
    <div id="sec-1">
      <div class="userHead">
        <div></div>
        <div>
          <img src="user/userDefault/icon.svg" alt="Your Icon" />
          <h4>Mark Brown</h4>
          <p>10 Connections</p>
        </div>
      </div>
      <div class="userOptions">
        <ul>
          <li><a href="#" title="sketch">Sketch</a>
          </li>
          <li><a href="#" title="update">Update</a>
          </li>
          <li><a href="#" title="settings">Settings</a>
          </li>
          <li><a href="#" title="logout">Logout</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="sec-2">
      <div class="userSelect">
        <ul>
          <li>Notifications</li>
          <li>Requests</li>
        </ul>
      </div>
      <div class="userNotes">
        <ul>
          <li>
            <img src="#" alt="Jbantock's Icon">
            <div>
              <h4><strong>Jbantock</strong> sent you a message.</h4>
              <p class="smallText">3 Hours Ago</p>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="2730 -1862 18 4">
              <g id="group-10" transform="translate(1650 -2375)">
                <circle id="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1080 513)" />
                <circle id="ellipse-19-2" data-name="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1087 513)" />
                <circle id="ellipse-19-3" data-name="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1094 513)" />
              </g>
            </svg>
          </li>
          <!-- Three more of these -->
        </ul>
      </div>
      <div class="userRequests">
        <ul>
          <li>
            <img src="#" alt="Jbantock's Icon">
            <div>
              <h4><strong>Jbantock</strong></h4>
              <p class="smallText">3 Hours Ago</p>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="2730 -1862 18 4">
              <g id="group-10" transform="translate(1650 -2375)">
                <circle id="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1080 513)" />
                <circle id="ellipse-19-2" data-name="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1087 513)" />
                <circle id="ellipse-19-3" data-name="ellipse-19" class="cls-1" cx="2" cy="2" r="2" transform="translate(1094 513)" />
              </g>
            </svg>
          </li>
          <!-- Three more of these -->
        </ul>
      </div>
    </div>
  </div>
</div>

这是完整的标记（抱歉，我知道它很长），我试图滚动的元素是.userRequests，它的样式及其父级是：

li
  width: 442px
  text-align: center
  color: lighten($textGrey, 20%)
  height: 28px
  line-height: 28px
  border: 1px solid lighten($textGrey, 20%)
  box-sizing: border-box
  &:first-child
    border-radius: 5px
  &:last-child
    border-radius: 5px

li.selected
  background: lighten($textGrey, 20%)
  color: $noHoverWhite
  border: none

.userNotes, .userRequests
   display: inline-block
   overflow-y: scroll
   height: 100%
   width: 442px

顺便使用sass（不要讨厌欣赏）

关于造成这种情况的任何想法都会很棒，我已经尝试了我在这里可以找到的所有建议，但似乎没有一个能让我想到的地方！ :(