🤔
flex: 1;을 사용할 때, 화면 크기에 따라 자식 요소가 부모의 영역보다 넘쳐흐르는 경우
말로 하면 헷갈리니 예시를 들어보자.
▼ HTML
<div class="contain">
<div class="top">뭔가 있음</div>
<div class="middle">
<strong class="title">스크롤 영역</strong>
<ul class="list-box">
<li class="list">테스트</li>
<li class="list">테스트</li>
<li class="list">테스트</li>
</ul>
</div>
<div class="bottom">뭔가 있음</div>
</div>
위와 같은 레이아웃이 있다고 가정할 때,
list-box 내에 list가 많아지면 스크롤바가 생기도록 하려고한다.
(위처럼 화면 안에 모든 콘텐츠가 나오고, list부분만 스크롤이 생겨야하는 상황)
이때 모든 태그의 높이는 부모에게 상속받을 수 있도록 100% 또는 flex: 1; 로 지정해 해상도에 상관없이 높이가 먹게끔 해놓은 상태다. (body의 높이는 100vh라 가정)
▼ CSS
:
(생략)
:
.contain{
display: flex;
flex-direction: column;
height: 100%; 👈
padding: 10px;
}
.middle{
flex: 1; 👈
display: flex;
flex-direction: column;
margin-top: 20px;
padding: 10px;
}
.list-box{
flex: 1; 👈
overflow-y: auto;
margin-top: 20px;
}하지만 막상 list를 추가해보면 아래와같은 문제가 발생한다.
❌ list-box에 스크롤은 생기지않고 정해진 영역을 무시한채 list가 list-box를 넓혀가며 커지고 있다.
그 덕에 bottom 영역이 화면 밖으로 밀려나 보이지 않게 되버리며 생기지 말아야할 스크롤바까지 생긴 것을 볼 수 있다.
flex: 1; 의 역할
flex: 1; 은 자식 요소가 부모 요소 안에서 남은 공간을 균등하게 차지하도록 하는 역할을 한다.
하지만 자식 요소가 자신이 가진 콘텐츠에 따라 높이를 필요 이상으로 키우려는 경우가 생길 수 있다.
기본적으로 Flexbox에서 자식 요소는 자신의 콘텐츠에 맞게 크기를 늘리려고 하는 성질이 있음
flex: 1;을 풀어쓰면flex-grow: 1; flex-shrink: 1; flex-basis: auto;가 되는데, 이때flex-basis가 자식의 기본크기를 정해주며, auto(default값)는 자식이 가진 콘텐츠 크기 그대로를 의미한다.
min-height
flex: 1; 만으로는 자식 요소의 높이를 제대로 제한하지 못한다.
이는 flex의 basis 속성보다 더 우선시되고 있는 속성이 있기 때문이다.
그게 바로 min-height 속성인데, 값이 없는 상태의 min-height 는 기본값이 auto가 된다.
(width 포함)
기본적으로 주어지는 최소 크기값이 콘텐츠의 크기값을 그대로 유지해나간다는 의미
즉,
flex-basis보다min-height값이 우선되고 있기때문에 자식 요소가 부모의 크기를 따라가지 못하고 넘쳐흐르게 되는 것이다.
🤗 해결
auto가 아닌 min-height: 0;을 설정해주면 자식 요소의 최소 높이가 콘텐츠의 크기에 제한되지 않고, 부모 요소에서 할당된 공간 내에서만 높이가 결정된다.
콘텐츠의 양과 상관없이 자식 요소가 부모 요소의 높이 안에 제대로 맞춰지게 됨!
▼ CSS
:
(생략)
:
.contain{
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
}
.middle{
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; 👈
margin-top: 20px;
padding: 10px;
}
.list-box{
flex: 1;
overflow-y: auto;
margin-top: 20px;
}
