230608) flex-grow 적용되지 않는 현상

분명 flex-grow: 1을 적용을 해 놨었고, 이전까지는 이가 잘 적용되는 것을 확인했었는데 갑자기 flex-grow가 적용되지 않는 현상이 나타났다.

flex-grow: 1이 적용된 사진

flex-grow:1 이 적용되지 않은 사진

위 사진처럼 영화 설명 부분에 flex-grow:1을 설정하여 정렬된 박스 중 설명칸이 가장 긴 카드에 맞추어 제목/평점 칸이 정렬되어야 했는데, 갑자기 이가 적용이 되지 않는 상황이었다.

정말 의아했던 점은 설명부분에 부모가 movie-card로 설정이 되어 있었는데 이에 flex설정이 잘 되어 있었고,

당연히 설명부분에도 flex-grow가 잘 설정되어 있었다.

그래서 구글링을 했는데 나에게 해당되는 부분은 전혀 없었다.

 

 

고민하던 도중 우리의 친구! 관리자 도구를 열어보자는 생각이 들었다!

그래서 해당 설명칸 부분을 확인해 보았다

알림) 부모 속성의 블록 속성이 이 요소의 플렉스 그로우를 막는 중! 부모 요소를 블록에서 플렉스로 바꿔 보세용!

귀신이 곡할 노릇이었다 분명히 부모요소에 flex가 잘 설정되어 있는 걸 확인했고,

html로도 .movie_overview의 직속(?)부모 부분이 .movie-card임도 다시 한 번 확인했는데

.movie_overview의 부모가 block으로 설정되어 있어서 flex-grow가 먹지 않으니 flex로 display  속성을 변경하라니???

 

근데 좀 이상한 부분을 감지했다

 

.movie_overview의 부모요소인 .movie-card에 진짜로 block처리가 되어 있었다

도대체 왜?? 나는 그런 적 없는데???????????? 하다가 뭔가 감이 와서

모든 js에서 block을 검색해 찾아 보았다 (다른 팀원 분께서 js에서 셀렉터로 해당 요소를 잡아 block처리를 했을까봐)

 

유레카~! 정답이었다!

다른 팀원 분께서 페이지네이션을 하는 과정에서 .movie-card요소의 display를 none/block처리 해 두신 것이었다!

그래서 이를 flex로 변경하니 바로 다시 원상태로 돌아와 flex-grow가 잘 적용됨을 확인!!!!!!

 

잘 해결돼서 기분이 아주!! 좋았다!

 

그리고 사실 이런 부분은 주의하더라도 워낙 다룰 게 많다 보니 충분히 display 속성이 서로 충돌할 수 있는 부분이기 때문이라고 생각해서, 앞으로도 이런 현상이 나타났을 때는 우선 내가 다룬 것들 중에 문제가 없는지 확인해 보고 정말 문제가 없는 게 확실할 경우 다른 팀원분들의 js에서 혹시 block 처리가 된 건 아닌지 확인해 보면 된다는 노하우가 생긴 것 같다! 역시 실패는 앎의 어머니이다~

 

오늘도 잘 해냈다!