max-height
max-heightプロパティを
モデールウィンドウに適用してみました!
画面サイズの90%の割合に設定したモデルウィンドウが大きくなり、写真画像の重要な項目をよりよく強調できます:)
写真以外の挿入ページの内容があふれています:スクロール;属性で処理しましたはは
cssは壁に入るのは低いが、容易ではないようだ...
モデールウィンドウに適用してみました!
画面サイズの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;
}
Reference
この問題について(max-height), 我々は、より多くの情報をここで見つけました https://velog.io/@dbfudgudals/max-heightテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol