flex
을 사용하면 뷰포트
혹은 요소의 크기
가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치
, 정렬
, 분산
이 가능합니다. 이때 특정 요소의 height
을 동적으로 구성하고 싶은 경우 다음과 같이 구성할 수 있습니다.
다음과 같이 작성하면 다음과 같이 유동적으로 height
의 영역을 자동으로 잡아주는 레이아웃을 만들 수 있습니다.
그러나 이를 safari
브라우저 에서 보게 된다면 다음과 같이 동적영역의 height
를 잡지 못하는 것을 확인할 수 있습니다.
구글신의 도움을 빌려 열심히 확인해 보니 safari
브라우저 에서는 flex
환경에서 자식의 height
를 상속받지 못하는 버그가 있다는 것을 알게되었습니다.
위의 코드는 동적영역과 해당자식에 대한 스타일 부분입니다. 위의 코드를 보면 dynamic_area
에 height
가 없고 해당 자식인 something_content
에서 height
를 상속받고 있었는데 이를 safari
브라우저에서 버그로 인해 인식을 못해 제대로 레이아웃이 그려지지 않고 있던 것으로 확인되었습니다..
여러 방법을 찾던 중 해당 상속을 받는 부모에게 height
만 명시해주면 자동으로 계산해주는 것을 확인하여 다음과 같이 처리하였습니다.
단순히 부모에게 height
에 대한 명시만 하고 크기는 따로 작성하지 않았습니다. 이렇게 작성하면 safari
브라우저에서도 정상적으로 동적으로 계산하며 레이아웃을 보여주게 됩니다.
Copyright © 2018 woolta.com
gommpo111@gmail.com