어떻게 Cesium을 flexbox 레이아웃으로 사용할 수 있습니까?

Question

나는 내가 갈 레이아웃의 예제가 this jsfiddle입니다.

버튼을 클릭하면 모든 것이 잘 작동합니다 (도 Google과 잘 맞지만 내 API 키 게시).

Cesium을 클릭하면 할당 된 플렉스 박스 공간을 고려하지 않은 것처럼 보입니다. 세슘이 어떻게 행동하게 할 수 있을까요?

참고하여 문제를 보여주기 위해 브라우저 조금 크기를 조정해야 할 수도 있습니다

Answer 1

이의 경우, 때문에 인 flexbox 불필요 (캔버스 '가로 세로 비율을 유지하려는 일부 기묘하다 세슘, 그것은 단지 다음 프레임에서 재 렌더링 할 것이기 때문에).

해결 방법은 다음과 같습니다. 다음과 같이 당신의 jsFiddle CSS의 상단을 편집

html { 
     height: 100%; 
    } 
    #cesiumContainer, .leaflet-container { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    } 

그런 다음, 기존의 .app .data .map 블록에 하나의 새로운 규칙을 추가 :

.app .data .map { 
     /* keep existing rules here */ 
     position: relative; 
    } 

가 여기에 modified jsFiddle입니다.

이것은 상위 플렉스 박스 요소가 position: relative 인 곳에서 부모/자식 관계를 설정합니다. 즉, 그 "절대적"하위 요소는 좌표 내에 절대적으로 위치하게됩니다. 이 경우 자식은 #cesiumContainer입니다. 절대 위치에있는 요소의 크기가 문서 흐름에 영향을 미치지 않는다는 부작용을 얻기 위해 좌표 시스템의 절대적인 성격을 얻기 위해 절대 위치하지 않았습니다. 그 주변. 이것은 세슘의 canvas 요소가 플렉스 박스를 밀어 낼 수 없다는 것을 의미합니다. 정확하게 준수해야합니다. 이것이 우리가 원하는 것입니다.