div 高度根据窗口大小与溢出-y：自动答案

【问题标题】：div height according to window size with overflow-y: autodiv 高度根据窗口大小与溢出-y：自动
【发布时间】：2021-08-08 14:11:14
【问题描述】：

我正在尝试制作一个模式来根据屏幕大小调整大小，内容为overflow-y: auto。当我的内容占用比模态内容容器更多的空间时，我无法让它工作。模态可以很好地拉伸到我设置的最大尺寸，但它没有正确缩小。

JS：

const Modal = ({ children }) => {
  return (
    <div className="modal">
      <div className="modal-body">
        <div className="modal-body-title"></div>
        <div className="modal-body-content">
          {/* THIS IS WHERE MY CONTENT IS */}
        </div>
      </div>
    </div>
  );
};
    
export default Modal;

SCSS：

.modal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto; // MY APP CONTAINER IS SET TO FLEX
  z-index: var(--z-modal);
  background: blue;

  &-body {
    display: flex;
    flex-direction: column;
    max-width: 64rem;
    max-height: 48rem;
    background: var(--c-submenus);
    box-shadow: var(--s-primary);
    padding: 1.25rem;
    margin: 4rem;

    &-title {
      background: red;
      min-height: 2.25rem;
      margin-bottom: 1.25rem;
    }

    &-content {
      background: green;
      flex: 1 1 auto;
      overflow-y: auto;
    }
  }
}

这就是我想要达到的目标：

这就是我目前拥有的：

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

使用 vh 根据屏幕大小固定高度。

vh  Relative to 1% of the height of the viewport*

参考：https://www.w3schools.com/cssref/css_units.asp

【讨论】：

但是当应用高度大于内容时，我的模态总是max-height。我试图实现的是，模态始终是最小的尺寸，直到达到最大高度
如果您希望模态框在内容尺寸小于屏幕的情况下包裹内容，您可以在“vh”中添加 max-height。