html - 具有最大高度的 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

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

• An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content 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>