内部div可滚动，最大高度

Question

我有以下标记：

我希望内部div可滚动并且具有最大高度，但是如果内容的高度较小，我不希望div的高度扩展到内容的高度以上。检查小提琴并调整高度，以查看效果。

https://jsfiddle.net/dapv7bor/1/

.umg-info {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  height: 100%;
  max-height: 80%;
  background: #1a1a1b;
  z-index: 50;
}

.umg-info-data {
  overflow: auto;
  height: 90%;
  margin: 20px 20px 20px 20px;
}

.umg-player-title {
  color: #fff;
  margin-bottom: 10px;
  padding: 0;
}

.umg-player-desc {
  color: #bbb;
  margin: 0;
  padding: 0;
}

<div class="umg-info">

  <div class="umg-info-data">
    <div class="umg-player-title">Lorem ipsum dolor sit amet</div>
    <div class="umg-player-desc">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies
      sollicitudin, nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est.
      Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum
      tellus tortor ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
      </div>
  </div>
</div>

Answer 1

您还可以中继flex布局并使用max-height / width来触发滚动条。

示例：

body {
  margin: 0;
}

.umg-info {
  /* because you used it, can be avoided if not for a modal */
  position: absolute;
  /* make a flex box with window's size where content is centered */
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.umg-info-data {
  /* single flex child centered, set max-size and overflow */
  max-width: 80vw;
  max-height: 80vh;
  overflow: auto;
  /* makup */
  background: #1a1a1b;
  color: #fff;
  padding: 20px;
  border: 20px solid #1a1a1b;
  box-sizing: border-box;
}

.umg-player-title {}

.umg-player-desc {}

<div class="umg-info">
  <div class="umg-info-data">
  <!-- maybe hx and p tags for text is to be used ? -->
    <h2 class="umg-player-title">Click also 'FULL PAGE'</h2>
    <p class="umg-player-desc">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies
      sollicitudin, nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est.
      Pellentesque porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum
      tellus tortor ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>
</div>

我将一些div转换为hx / p标签，并在设置深色背景的情况下设置白色，以确保不会遗漏任何持有文字的孩子。 ;）

codepen to play with

Answer 2

在.umg-info上滚动并从.umg-info-data删除高度

Answer 3

经过编辑，使小提琴手可以处理他的示例，并弄清楚需要做什么

我相信您需要做的就是设置.umg-info-desc {max-height: 90%; overflow: auto;}（并从ata规则中删除规则）。您可以在此提琴上看到一个工作示例：https://jsfiddle.net/dapv7bor/14/