Highcharts: 플렉스 컨테이너 내부의 높이와 너비

내부 컨테이너 및 SVG에 대해 100%를 추가하는 #1157에 대한 수정은 플렉스 상자 너비에도 작동하지만 높이는 작동하지 않습니다.

• 플렉스 방향:행 고정

그동안 높이 문제에 대한 해결 방법이 있습니까?

flex: 1 1 50% 와 같은 부모에 height: 0 을 넣고 차트 컨테이너에 overflow: hidden 가 있는지 확인하는 데 성공했습니다.

<div id="parent"> // flex-sized, but height 0
  <div id="chart-container"> // flex 1, overflow hidden, display flex
    <div id="chart"> // flex 1, overflow hidden

그리고 이것은 모든 경우에 (Chrome에서) 작동하는 것 같습니다. 플렉스와 너비/높이를 혼합하면 실제로 함께 작동하지 않기 때문에 정말 까다로워집니다.

당신의 응답을 주셔서 감사합니다! 그것은 효과가 있었다 :)

또한 flexed item 아래에 있는 "chart-container"에서 height:100% 를 사용하여 작동하도록 했습니다.

어떤 이유로 height:0 이 작동하지 않았습니다.

Chrome(최신 64.0)에서 앱을 테스트할 때 높이 문제가 발생했습니다. highchart 컨테이너는 부모 안에 맞지 않습니다. 그것은 단지 오버플로 될 것입니다 (스크롤링과 같지 않지만 상위 컨테이너보다 커짐). html의 구조는 다음과 같이 표현할 수 있습니다(.flexed_item은 디스플레이가 flex로 설정된 div의 자식입니다) -

.flexed_item{ 너비: 100%; 높이: 100%;} -> .chart-container{ 너비:100%; 높이:80%} -> .highchart

이것은 파이어 폭스에서 잘 작동했습니다. 그러나 크롬에서는 그렇지 않습니다.
그러나 @lwhorton이 언급

.flexed_item{ 높이: 0; 너비: 100%; 플렉스: 1 1 100%; 디스플레이: 플렉스; }-> .chart-container { flex:1; 디스플레이:플렉스; } -> .하이차트

그리고 이제 마침내 ( chrome 및 firefox ) 모두에서 작동합니다.

absolutely 위치 chart-container 와 flex-grow: 1 있는 relatively 위치 지정 부모를 사용하여 해결했습니다. 또한 해킹이 필요하지 않으므로 브라우저 간 호환이 가능합니다.

<div id="row" style="display:flex">
    <div id="col" style="display:flex; flex-direction: column;">
        <div id="chart-container-outer" style="position:relative; flex-grow:1">
            <div id="chart-container" style="position:absolute; left:0; top: 0; bottom:0; right:0; overflow:hidden"></div>
        </div>
    </div>

    <div id="col sibling" style="display:flex"> // same height
    </div>
</div>

@dabalyan
솔루션을 공유해 주셔서 감사합니다.
위의 코드를 사용하면 문제가 해결된 것 같으므로 지금은 문제를 종료합니다.
이 문제를 다시 보려면 해당 사례에 대한 추가 정보를 제공하세요.

안녕하세요 @maitrivasa 입니다 .
https://github.com/highcharts/highcharts/issues/13303 에서 별도의 사례도 만드셨습니다

추신. 혼동을 일으킬 수 있으므로 귀하의 의견과 주제를 복제하지 마십시오.

미안 해요. 지금 내 게시물을 삭제했습니다