html - 内部 div 可滚动，最大高度

Question

我有以下标记:

我希望内部 div 可以滚动并具有最大高度，但如果内容的高度较小，我不希望 div 高度扩展超过内容的高度。检查 fiddle 并调整高度以查看效果。

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 标签，并在设置深色背景的地方设置白色，以确保没有 child 拿着文本被遗忘。 ;)

codepen to play with