[CSS] flex-shrink๋ฅผ ์ด์ฉํ ๋ชจ๋ฌ ๋ฒํผ ํฌ๊ธฐ ์ ์ง ๋ฐ ์คํฌ๋กค ๋ฌธ์ ํด๊ฒฐ
์น ํ์ด์ง์์ ๋ชจ๋ฌ ์ฐฝ์ ๋ง๋ค ๋, ๊ธด ๋ด์ฉ์ด ๋ค์ด๊ฐ๊ฑฐ๋ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์ฝํ ์ธ ๊ฐ ์๋์ผ๋ก ์คํฌ๋กค๋๋๋ก max-height์ overflow-y: auto ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
ํ์ง๋ง ์ด๋ ๊ฒ ์ค์ ํ๋ฉด ๋ชจ๋ฌ ์ฐฝ ๋ด๋ถ์ ์์๋ค์ด ์๋์น ์๊ฒ ํฌ๊ธฐ๊ฐ ์ค์ด๋๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ ์ ์๋ค.
์ด ๊ธ์์๋ ์ด๋ฐ ํ์์ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ๊ณผ CSS flex-shrink ์์ฑ์ ์ฌ์ฉํด ๋ฒํผ ํฌ๊ธฐ๋ฅผ ์์ ์ ์ผ๋ก ์ ์งํ๋ ๋ฐฉ๋ฒ์ ์๊ฐํ๋ ค๊ณ ํ๋ค!
๋ชจ๋ฌ ์ฐฝ์ ๋์์ธํ๋ฉด์ ์๋์ ๊ฐ์ ์คํ์ผ์ ์ ์ฉํ๋ค:

.modal {
display: none;
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
max-width: 450px;
max-height: 700px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
<div class="modal" style="display: block;">
<div class="modal-content">
<p>๋ชจ๋ฌ์ ๋ํ ๋ด์ฉ</p>
<button class="confirm-btn primary-bg white-color">ํ์ธ</button>
</div>
</div>

์ฌ๊ธฐ์ max-height์ overflow-y: auto๋ฅผ ์ฌ์ฉํด ๋ชจ๋ฌ ์ฐฝ์ ๊ธธ์ด๊ฐ ์ต๋์น๋ฅผ ๋์ผ๋ฉด ์คํฌ๋กค์ด ์๊ธฐ๋๋ก ํ๋ค.
๊ทผโ๋ฐโ๋ฐโ
์ด ์ค์ ๊ณผ ํจ๊ป display: flex ์์ฑ์ ์ฌ์ฉํ๋ ๋ด๋ถ ๋ฒํผ์ ํฌ๊ธฐ๊ฐ ์๋์น ์๊ฒ ์ค์ด๋ค์๋ค.
flex-shrink๋?
์ฐพ์๋ณด๋๊น flex-shrink ์์ฑ์ ๊ธฐ๋ณธ๊ฐ์ด 1๋ก ์ค์ ๋์ด ์์ด, ์ด ๊ฐ์ด ์ ์ฉ๋ ์์๋ ๊ณต๊ฐ์ด ๋ถ์กฑํ ๋ ํฌ๊ธฐ๊ฐ ์ค์ด๋๋ ํน์ฑ์ด ์์๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, .confirm-btn ํด๋์ค์ flex-shrink: 0; ์์ฑ์ ์ถ๊ฐํด ๋ฒํผ์ด ์ค์ด๋ค์ง ์๋๋ก ์ค์ ํ๋ค
flex-shrink: 0; ์์์ ํฌ๊ธฐ๊ฐ ์ ๋ ์ค์ด๋ค์ง ์์
flex-shrink: 1; ๋ถ๋ชจ ์์์ ๊ณต๊ฐ์ด ๋ถ์กฑํ ๋ ๋น์จ์ ๋ง๊ฒ ํฌ๊ธฐ๊ฐ ์ค์ด๋ฆ
flex-shrink: n; 1๋ณด๋ค ํฌ๊ธฐ๊ฐ ๋ ์ค์ด๋ฆ
.confirm-btn {
width: 100px;
height: 36px;
padding: 0px;
margin: 15px;
border: 1px solid #999999;
cursor: pointer;
font-size: 14px;
flex-shrink: 0; /* ํฌ๊ธฐ ์ค์ด๋ค์ง ์๋๋ก ์ค์ */
}

์ด๋ ๊ฒ ์ค์ ํ ๊ฒฐ๊ณผ, ๋ชจ๋ฌ ์ฐฝ์ ๋ด๋ถ ์คํฌ๋กค๊ณผ ์๊ด์์ด ๋ฒํผ์ ํฌ๊ธฐ๊ฐ ์๋ํ ๋๋ก ์ ์ง๋์๋ค.