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

Question

我正在尝试制作一个模式来根据屏幕大小调整大小，内容为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;
    }
  }
}

这就是我想要实现的目标：

这就是我目前所拥有的：

标签： htmlcsssassflexbox

Answer 1

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

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

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