내가 어떻게 오버 플로우 - y를 :-X 오버 플로우의 자식 스크롤 : 스크롤

Question

I가 다음과 같은 마크 업 및 CSS :

https://jsfiddle.net/f0u9kpkb/

의 핵심 부분은 다음과 같습니다

.grid { 
    border: 1px solid #bdbdbd; 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: auto; 
    height: 200px; 
} 

.grid .grid-body { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: visible; 
    overflow-y: auto; 
} 

내 코드에서 바깥 쪽 div에 가로 스크롤 막대가 생기고 안쪽 div에 오버플로가있는 세로 스크롤 막대가 생길 것으로 예상하지만 예제에서는 2 개의 가로 스크롤 막대가 있습니다 (오버플로 - x 설정에도 불구하고 : 내부 스크롤 막대에 표시됨).)

w3schools.com에 overflow property을 검토하십시오 나는

Answer 1

을 찾고 효과를 얻을 수있는 방법이 있나요

당신은 내가 볼 수있는 문제의 몇 일이 일어나고 있습니다. 첫 번째는 테이블에 행을 더 추가해야 테이블을 길게 만들 수 있기 때문에 실제로 스크롤 할 수 있습니다 (모니터에는 없었습니다).

두 번째는 두 번 .grid 클래스 오버 플로우를 속성을 정의하는 것입니다. 일단 여기

:

.grid { 
    border: 1px solid #bdbdbd; 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: auto; 
    height: 200px; 
} 

하지만이 클래스가 :

.grid 바디 클래스뿐만 아니라 .grid뿐만 아니라의 속성을 변경

.grid .grid-body { 
    display: flex; 
    flex: 1; 
    flex-direction: column; 
    overflow-x: visible; 
    overflow-y: auto; 
} 

클래스

이 클래스에서 오버플로 속성을 제거하고 다른 스타일을 추가했습니다. e .grid-body 클래스 전용이므로 .grid 클래스 속성을 덮어 쓰지 않습니다.

.grid-body { 
    overflow-x: hidden; 
    overflow-y: visible; 
} 

또한 테이블에 행을 추가했습니다. 이렇게하면 내부 div의 수직 스크롤과 외부 div의 수평 div의 요청 된 동작을 얻을 수 있습니다. See my JSFiddle.

외모에 맞게 연주하고 싶을 수도 있습니다. 나는 외부 divs 오버 플로우를 overflow: auto으로 설정하고 내부 divs는 this JSFiddle처럼 overflow: visible으로 오버플로하는 것이 좋습니다.

Answer 2

당신은

그리고

추가

가 새로운 클래스 .fix-position{ top:auto; position:fixed; }

어떤 문제가있을 경우 내 JsFiddle

, 알려 주시기 바랍니다 검토하십시오 right:0 CSS 클래스 .grid .grid-body에 추가해야합니다.