html - CSS:具有最大高度的容器，之后，子 div 应该开始滚动

Question

我有一个模态窗口，它应该尽可能小，延伸到高度的 70%。之后，模态的内容(但不是模态本身)应该开始滚动。我做不到。

我的 HTML 看起来像这样:

<div class="dialog"> 
    <div class="ui-root" >
        <div class="title" />
        <div class="body" />
        <div class="buttons" />
    </section>
</div>

这是 CSS 思想:

 .dialog { max-height: 70% }
 .ui-root { display: flex }
 .body { flex: 1; overflow: scroll }

言外之意:

• 如果body内容比较少，.body的高度可以是内容的高度。
• 如果正文内容很大，则 .body 开始 flex ，直到超出 .dialog 的最大高度。现在它开始滚动。

问题:

• 忽略最大高度值。

玩一下:

http://jsfiddle.net/ch7n6/904/

Answer 1

max-height 应该在这里被忽略，因为它应用于 dialog 并且它不会影响它的子元素，它是一个 flexbox(应该有特定的高度)。

If the height of a flexbox is not specified, then you won't be able to contain it within the parent element.

当我给你的 flexbox (ui-root) max-height: 100% 时，看看它是如何解决的:

html, body {
    height: 100%;    
}

.dialog {
      max-height: 50%;
      width: 40%;
      height: 50%;
}
.dialog.underflowing-dialog {
      position: absolute;      
}
.dialog.overflowing-dialog {
      position: absolute;      
      left: 50%;
}

.ui-root {
    display: flex;
    flex-direction: column;
    background-color: red;
    max-height: 100%;
}

.ui-root article {
    flex: 1;
    overflow: scroll;
}

.underflowing-dialog .height-setting-content {
  height: 9px;
}
.overflowing-dialog .height-setting-content {
  height: 9999px;
}

.ui-root header {
    background-color: gray;
}
.ui-root footer {
    background-color: gray;
}

<div class="dialog overflowing-dialog"> 
    <section class="ui-root" >
        <header class="title" >Should always be visible</header>
        <article class="body">  
          this should scroll
          <div class="height-setting-content"></div>
          and have the minimum height
        </article>
        <footer class="buttons" >Should always be visible</footer>
    </section>
</div>

<div class="dialog underflowing-dialog">
    <section class="ui-root" >
        <header class="title" >Should always be visible</header>
        <article class="body">  
          this should scroll
          <div class="height-setting-content"></div>
          and have the minimum height
        </article>
        <footer class="buttons" >Should always be visible</footer>
    </section>
</div>