중첩 된 플렉스 박스의 오버플로 -x

중첩 된 플렉스 박스 항목 내에서 중앙 패널의 스크롤 가능 영역 (x 및 y)을 만들려고합니다.중첩 된 플렉스 박스의 오버플로 -x

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    color: #fff; 
 
} 
 

 
.layout { 
 
    display: flex; 
 
    align-items: stretch; 
 
    flex-wrap: nowrap; 
 
    width: 100%; 
 
} 
 

 
.layout.horizontal { 
 
    flex-direction: row; 
 
} 
 

 
.layout.vertical { 
 
    flex-direction: column; 
 
} 
 

 
.pane { 
 
    position: relative; 
 
    flex: 1; 
 
} 
 

 
.fill { 
 
    min-height: 100%; 
 
    height: 100%; 
 
} 
 

 
.scrollable { 
 
    overflow-x: auto; 
 
    overflow-y: auto; 
 
} 
 

 
.content { 
 
    background-color: salmon; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 

 
/* Colour Highlighting */ 
 

 
.layer1 > .pane:nth-child(1) { 
 
    background-color: steelblue; 
 
} 
 

 
.layer1 > .pane:nth-child(2) { 
 
    background-color: plum; 
 
} 
 

 
.layer1 > .pane:nth-child(3) { 
 
    background-color: lightsteelblue; 
 
} 
 

 
.layer2 > .pane:nth-child(1) { 
 
    background-color: darkseagreen; 
 
} 
 

 
.layer2 > .pane:nth-child(2) { 
 
    background-color: seagreen; 
 
} 
 

 
.layer2 > .pane:nth-child(3) { 
 
    background-color: lightseagreen; 
 
}

<div class="layout horizontal fill layer1"> 
 
    <div class="pane"> 
 
    LEFT 
 
    </div> 
 
    <div class="pane"> 
 
    <div class="layout vertical fill layer2"> 
 
     <div class="pane"> 
 
     TOP 
 
     </div> 
 
     <div class="pane scrollable"> 
 
     <div class="content">CONTENT</div> 
 
     </div> 
 
     <div class="pane"> 
 
     BOTTOM 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="pane"> 
 
    RIGHT 
 
    </div> 
 
</div>

참고 : 전체 창 모드로 샘플을 확장합니다. 중첩되지 않은 시나리오에서

수평 스크롤이 중앙 패널에 대해 잘 작동 : 예상대로 중첩 된 경우

Vertical Flexbox Example

Horizontal Flexbox Example

그러나, 중앙 패널의 수평 스크롤이 작동하지 않습니다 . Chrome, Firefox 및 Edge의 경우 인 것 같습니다. 재미있게도 IE11에서 예상대로 작동합니다. 이는 현대의 브라우저가 나에게 알려지지 않은 사양을 올바르게 해석하고 있음을 나타냅니다.

무엇이 누락 되었습니까?

업데이트 : 외부 중앙 열에 자동 설정 : 자동 설정이 필요합니다. 이것으로 예상대로 동작합니다. 왜 이런거야?

출처

2017-04-07 Brett Postin

그래서 무엇을 기대합니까? .... 내가 본대로 의도 한대로 작동합니다. – LGSon

나는 볼 수있는 영역이 빨간색 콘텐츠 상자보다 작을 때 중앙 패널이 축소되어 수직으로 동일한 방법으로 가로로 스크롤 할 것을 기대하고 있습니다. 중첩되지 않은 예제에서와 같은 방식입니다. –

당신이 맞습니다 : 그것은 사양에 정의 된 동작입니다. 기본적으로 flex 항목은 해당 내용보다 작을 수 없습니다. –