원래 다른 걸 구현하는 걸 목표로 코딩을 시작했는데 쌩뚱맞은 곳에서 N시간 삽질해버렸다(...) 억울하고 분하지만 하나 알아갔으므로 적어보는 포스팅.

레이아웃 구성 방법

내가 주로 레이아웃을 구성하는 방법은 다음과 같다.

1. Head, Body, Foot으로 나누기.
2. Body에 flex: 1을 주어 공간을 차지하기.

예를 들면 이런 경우이다.

예외적인 부분이 아니라면 대부분의 레이아웃은 이 꼴에서 벗어나지 않는 것 같다. 코드로 보면 다음과 같다.

.flex-container{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.head {
	width: 100%;
    height: 80px
}

.body {
	flex: 1; <---------------여기 부분!
    width: 100%;
}

.foot {
	width: 100%
    height: 40px
}```

사실 난 CSS in JS로 적긴 하는데... 중요한 건 .body의 flex: 1 부분이다. 이 속성은 short-hand 속성인데, flex-grow: 1, flex-shrink: 1, flex-basis: 0%을 지정해주는 것이다.

이게 머냐면,, flex-basis부터 봐야한다. 요놈은 이름에서부터 알 수 있듯이 기본, 기준이 되어주는 녀석인데 자식의 기본 크기를 지정해줄 수 있다. Default값인 auto는 자식이 가진 콘텐츠 크기 그대로이며, flex-direction에 따라 너비, 높이를 지정해줄 수 있다. (기본 크기)

이 기본 크기에서~ 더 늘어날 수 있느냐를 결정하는 게 flex-grow, 더 줄어들 수 있느냐를 결정하는 게 flex-shrink이다. 각 속성에 대한 더 자세한 설명은 MDN 참고!

이런 특징 때문에 Flex라는 이름을 가지게 된 것.

때문에~ flex item인 .body에만 flex: 1을 주게 되면 요것만 자리를 차지하게 되는 것이다.

문제 상황

이런 특성 덕분에 레이아웃을 잘 잡고 있다가, 어느 순간 자식의 크기가 이 flex: 1을 준 flex item보다 커지는 경우가 생겨버렸다. overflow: hidden을 주면 머 사라지겠지~ 했는데 ...

다른 flex item을 밀어내더니 급기야 레이아웃에서 벗어나버리는 녀석... 정말 유연의 끝을 보여주었다.

원인

혼자서 쌩쇼를 하다가 검색 몇 번 해보니까 나오더라(...) 검색을 생활화하자.

flex-basis보다 더 먼저 적용되는 속성이 있다. 그건 바로 min-[] 속성! 나의 경우엔 min-height가 되겠다. 이 녀석은 기본값이 auto로 지정되어 있는데, 이는 기본적으로 주어지는 초기 최소 크기값이다. 그리고 이게 flex-basis보다 먼저 우선적으로 적용된다는 뜻은~ 계속해서 콘텐츠의 크기를 지켜내겠다는 기개가 되겠다.

해결

기개는 인정하나 나와 신념은 맞지 않기 때문에 min-height: 0을 주어 없애주자. 그러면 flex-basis가 우선이 되고 얌전히 overflow된다.

---

• 참고: https://heewon26.tistory.com/298