Chrome 및 Firefox에서 부트 스트랩 메뉴 너비 문제가있는 Flexbox 레이아웃

Question

flexbox를 사용하고 Chrome에서 올바르게 표시되는 flexbox를 얻으려는 시도입니다. & Firefox는 부트 스트랩 하위 메뉴에 있지만 하위 메뉴 패널에서는 너비가 올바르게. 거의 수평 적으로 확장되지 않으며 메뉴 항목이 메뉴의 경계 위로 쏟아집니다. 최근 버전의 IE에서 보았을 때 메뉴는 작동해야하지만 크롬/파이어 폭스/오페라에서는 작동하지 않습니다.

이것은 dx-menu-container-wrap div 안에 여러 개의 ul가있는 메뉴 구조입니다 (간결성을 위해 하나만 표시).

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> 
     <span class="icon-bar"></span> 
    </a> 

     <div class="nav-collapse"> 
      <ul class="nav"> 
       <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li class="dropdown-submenu"> <a href="#">More options</a> 

          <div class="dropdown-menu"> 
           <div class="dx-menu-container-wrap"> 
            <ul> 
             <li> 
              <p><strong>Category 1</strong> 

              </p> 
             </li> 

그리고 다음 CSS는 다음과 같습니다

.dx-menu-container-wrap { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex-grow: 1; 
    white-space:nowrap; 
    height:400px; 
} 

내가 크롬과 파이어 폭스에서 인 flexbox 컨테이너를 수용 할 수 있도록 확장 메뉴의 폭을 얻을 뭔가 다른 일을해야합니까?

희망하는 동작은 다음과 같습니다. 고정 높이가 400px이고, 왼쪽 열에서 처음으로 ul이 채워지고, 가장 왼쪽 위치부터 오른쪽 방향으로 추가 열로/flex가 확장됩니다.

는 * IE

http://jsfiddle.net/cjsmith/2287nv0o/9/

에서 작동

Answer 1

이처럼 드롭 다운 래퍼에 최소 폭을 추가하는 시도 할 수 있습니다하십시오 min- 여기

.dx-menu-container-wrap { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex-grow: 1; 
    white-space:nowrap; 
    height:400px; 
    min-width:300px; 
} 

인 flexbox 드롭 다운의 jsfiddle을 것 너비 : http://jsfiddle.net/AndrewL32/2287nv0o/11/

Chrome, FF 및 IE에서도 올바르게 작동하는 것 같습니다.