스크롤이 Firefox의 CSS3 플렉스 상자에서 작동하지 않습니다.

Question

내 레이아웃에 box-flex을 사용하고 있지만 플렉스 상자를 스크롤 할 수 없습니다.

HTML :

<div class='dashboard'> 
    <div><button>Widget</button></div> 
    <div class="noboard"><button>Yammer</button> 
    <div class="yammerboard" > 
     <div><button>Dashboard22</button></div> 
     <div><button>Dashboard22</button></div> 
     <div><button>Dashboard22</button></div> 
     <div><button>Dashboard22</button></div> 
     <div><button>Dashboard22</button></div> 
    </div> 
    </div> 
    <div><button>Notifications</button></div> 
</div> 

CSS : 파이어 폭스에서

.dashboard { 
    display: box; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-box; 
    box-orient:vertical; 
    -ms-box-orient: horizontal; 
    -moz-box-orient:horizontal; 
    -webkit-box-orient: horizontal; 
    border: solid 2px black; 
    overflow-y:auto; 
} 
.noboard { 
    display: box; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-box; 
    box-orient:vertical; 
    -ms-box-orient: vertical; 
    -moz-box-orient:vertical; 
    -webkit-box-orient: vertical; 
    overflow-y:auto; 
} 
.yammerboard { 
    display: box; 
    display: -webkit-box; 
    display: -moz-inline-box; 
    display: -ms-box; 
    box-orient:vertical; 
    -ms-box-orient: vertical; 
    -moz-box-orient:vertical; 
    -webkit-box-orient: vertical; 
    overflow-y:scroll; 
    -moz-box-sizing: inherit; 
    box-flex: 0; 
    -ms-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-box-flex: 0; 
    -moz-box-lines:multiple; 
} 

가 나는 그것이 overflow:auto로 스크롤하고, 수직 확장에서 플렉스 박스를 중지합니다. box-flex: 0; 설정이 작동하지 않습니다.

어떻게해야합니까?

Answer 1

플렉스 박스는 지금 당장 Firefox에서 꽤 이상하게 보입니다. 고정 또는 절대 위치 요소에서 작동하지 않는다는 알려진 문제가 있습니다. 또한 플렉스 박스가 파이어 폭스에서 작동하기 위해서는 너비가 있어야한다는 것을 알고 있어야합니다. 그렇지 않으면 인라인 블록으로 처리됩니다.

Answer 2

Firefox의 플렉스 상자에서 세로 스크롤과 비슷한 문제가있었습니다. 콘텐츠가 수직으로 넘칠 때 Firefox는 스크롤바 거터를 표시하지만 스크롤 핸들은 표시하지 않으며 콘텐츠 상자는 고정되어 스크롤 할 수 없습니다.

플렉스 박스 속성이있는 상자에 최소 높이를 단순히 추가하여 문제를 해결했습니다. 어쨌든 최소 높이를 설정할 필요가 있었지만 어떤 경우에도 최소 높이 : 1px에서 해킹 할 수 있습니다.

Firefox 13, YMMV에서만이 동작을 테스트했습니다.