具有最大高度的 div 包含另一个具有最大高度的 div（溢出不起作用）

Question

我目前正在使用Materializecss 来显示模式。在我的模式中，我有一个 div Content 使用 ng-repeat 显示项目。问题是，随着内容的填充，我的content-div 的 css-rule 永远不会被拾取。溢出（滚动条）发生在我的模式而不是我的content-div。

我实际上希望我的标题和按钮始终可见。

（简体 html）：

<div class="modal">
     <div class="title"> ... </div>
     <div class="content">
        <ul>
             <li class="collection-item" ng-repeat="usr in returnedUsers">{{usr.UserName}}</li>
         </ul>
     <div class="button">
</div>

css 类

.modal {
background-clip: padding-box;
background-color: #eee;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
max-width: 55%;
overflow-y: auto;
padding: 24px;
position: fixed;
right: 0;
transform: translate(0px);
z-index: 1000;

.content{
     max-height: 60%;
     overflow: auto;
}

简化的 JSFiddle：fiddle

关注 SO-Post 并没有为我解决问题：

css max-height inside max-height

Table inside a div with max-height

firefox css max-width and max-height inside max-height div

注意：如果可能的话，我想阻止更改课程modal

注意2：在我的.content上设置高度并没有为我解决。

Answer 1

这里有一个解决方案：

您需要在max-height 中为您的.content ul 提供一个固定值，而不是percentage

通常，块框的内容被限制在内容边缘 的盒子。在某些情况下，一个盒子可能会溢出，这意味着它的内容 部分或全部位于框外，例如：

• 元素的高度超过了指定给 包含块（即包含块的高度由 'height' 属性，而不是内容高度）。

阅读更多关于overflow

    .modal {
      background-clip: padding-box;
      background-color: #eee;
      border-radius: 2px;
      left: 0;
      margin: auto;
      max-height: 70%;
      max-width: 55%;
      overflow-y: auto;
      padding: 24px;
      position: fixed;
      right: 0;
      transform: translate(0px);
      z-index: 1000;
    }
    .content ul {
      max-height: 70px; /* whatever you want*/
      overflow: auto;
    }

<div class="modal">
  <div class="title">MyTitle</div>
  <div class="content">
    <ul>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
    </ul>
    <div class="button">Btn1 - Btn2</div>
  </div>