max-height


max-heightプロパティを
モデールウィンドウに適用してみました!
画面サイズの90%の割合に設定したモデルウィンドウが大きくなり、写真画像の重要な項目をよりよく強調できます:)
写真以外の挿入ページの内容があふれています:スクロール;属性で処理しましたはは
cssは壁に入るのは低いが、容易ではないようだ...
const ModalComponent = styled.div`
  border-radius: 0.5vw;
  position: fixed;
  width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fafafc;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border: none;
  box-sizing: border-box;
  min-width: 380px;
  margin: auto;
  max-height: 90%; // max 적용
  overflow-x: hidden;
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: lightgray;
  }