2016-07-06 106 views
8

我爲使用Flexbox的應用程序創建了一個響應式佈局。 這個佈局需要左邊的可摺疊菜單,中間有一個標題和正文的塊,右邊有一個可切換的幫助窗格(還有更多,但這是基本結構)。white-space:nowrap打破flexbox佈局

左側菜單有兩種狀態:180px寬或80px寬。幫助窗格是隱藏的,或者需要180px。中間的盒子佔據了空間的其餘部分。 Flexbox的作用就像一個魅力。

當我使用white-space: nowrap製作滾動div時,麻煩就開始了。我有一堆項目需要在水平滾動條中顯示,所以我有一個列表div與項目,設置爲overflow:autowhite-space: nowrap

通常這個工程就像一個魅力,但現在它打破了我的柔性佈局。而不是採取父(flex)div的寬度,滾動使div更寬,這反過來推動幫助窗格出界。


下小提琴說明了這個問題:

http://jsfiddle.net/PieBie/6y291fud/

您可以通過單擊菜單欄中的切換幫助切換幫助窗格。 通過在菜單中單擊列表空白切換重新創建問題,將切換列表的white-space: no-wrap CSS屬性。如果幫助窗格打開,您可以看到它被推出界限。

底部列表是我想要實現的,但我希望它是它的父項的全部寬度。

我可以在Chrome,Firefox,Opera,Vivaldi和Edge中重新創建問題。 Internet Explorer 11播放不錯(°_°)。我更喜歡純粹的CSS解決方案(SCSS也是一種選擇),但如果需要的話,我可以使用JS。


$('#nav-toggle').on('click',function(){ 
 
\t $(this).parent().toggleClass('collapsed'); 
 
}); 
 
$('#help-toggle').on('click',function(){ 
 
\t $('#help-pane').toggleClass('visible'); 
 
}); 
 
$('#list-toggle').on('click',function(){ 
 
\t $('#list').toggleClass('nowrap'); 
 
});
body,html{width:100%;height:100%;overflow:hidden;} 
 

 
#body{ 
 
    display:flex; 
 
    flex-flow:row nowrap; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#abc; 
 
    overflow:hidden; 
 
} 
 

 
#shell{ 
 
    flex: 1 1 auto; 
 
    display:flex; 
 
    flex-flow:row nowrap; 
 
    position:relative; 
 
    width:100%; 
 
    min-height:100%; 
 
} 
 

 
    #left{ 
 
    flex: 0 0 180px; 
 
    min-height:100%; 
 
    min-width: 0; 
 
    background:lightblue; 
 
    } 
 
    #left.collapsed{ 
 
    flex: 0 0 80px; 
 
    } 
 
    
 
    #mid{ 
 
    flex: 1 1 auto; 
 
    min-height:100%; 
 
    min-width: 0; 
 
    display:flex; 
 
    flex-flow:column nowrap; 
 
    align-items:stretch; 
 
    align-content:stretch; 
 
    position:relative; 
 
    width:100%; 
 
    min-height:100vh; 
 
    min-width: 0; 
 
    background:purple; 
 
    } 
 
     #mid-top{ 
 
     flex: 0 0 auto; 
 
     min-height:100px; 
 
     background:green; 
 
     } 
 
     #mid-bottom{ 
 
     min-height:calc(100% - 100px); 
 
     flex: 1 1 auto; 
 
     background:lightgreen; 
 
     } 
 
     #list{ 
 
     overflow: auto; 
 
     width: 100%; 
 
     max-width: 100%; 
 
     } 
 
     #list.nowrap{ 
 
     white-space: nowrap; 
 
     } 
 
     #secondlist{ 
 
     overflow: auto; 
 
     max-width: 250px; 
 
     white-space: nowrap; 
 
     } 
 
     .list-item{ 
 
     display: inline-block; 
 
     width: 50px; 
 
     height: 50px; 
 
     margin: 2px; 
 
     background: purple; 
 
     } 
 
     .list-item.odd{ 
 
     background: violet; 
 
     } 
 
     
 
#help-pane{ 
 
    display:none; 
 
    flex: 0 0 0px; 
 
    background:red; 
 
} 
 
#help-pane.visible{ 
 
    display:inherit; 
 
    flex:0 0 180px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
<div id="shell"> 
 
     <div id="left"> 
 
      <div id="nav"> 
 
      - menu - 
 
      </div> 
 
      <div id="help-toggle"> 
 
      help toggle 
 
      </div> 
 
      <div id="nav-toggle"> 
 
      nav toggle 
 
      </div> 
 
      <div id="list-toggle"> 
 
      list whitespace toggle 
 
      </div> 
 
     </div> 
 
     <div id="mid"> 
 
      <div id="mid-top"> 
 
       - mid top - 
 
      </div> 
 
      <div id="mid-bottom"> 
 
       - mid bottom- <br><br> 
 
       <div id="list"> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       </div> 
 
       <hr> 
 
       <div id="secondlist"> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</div> 
 
<div id="help-pane" class="visible"> 
 
    - help-pane - 
 
</div> 
 
</div>

+1

它看起來像您遇到的*默認的最小尺寸設置爲柔性物品*。默認情況下,Flex項目的大小不能小於其內容的大小。有一個簡單的解決方案。 http://stackoverflow.com/a/36247448/3597276 –

回答

14

這是由default flex-box behaviour,防止成爲小於它的內容柔性盒造成的。

此問題的解決方案是將min-width: 0(或列的最小高度:0)設置爲所有父級柔性框。 在這種特殊情況下(以及fiddle):

#shell{ 
    flex: 1 1 auto; 
    display:flex; 
    flex-flow:row nowrap; 
    position:relative; 
    width:100%; 
    min-height:100%; 
    min-width: 0; /* this one right here does it!*/ 
} 

$('#nav-toggle').on('click',function(){ 
 
\t $(this).parent().toggleClass('collapsed'); 
 
}); 
 
$('#help-toggle').on('click',function(){ 
 
\t $('#help-pane').toggleClass('visible'); 
 
}); 
 
$('#list-toggle').on('click',function(){ 
 
\t $('#list').toggleClass('nowrap'); 
 
});
body,html{width:100%;height:100%;overflow:hidden;} 
 

 
#body{ 
 
    display:flex; 
 
    flex-flow:row nowrap; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#abc; 
 
    overflow:hidden; 
 
} 
 

 
#shell{ 
 
    flex: 1 1 auto; 
 
    display:flex; 
 
    flex-flow:row nowrap; 
 
    position:relative; 
 
    width:100%; 
 
    min-height:100%; 
 
    min-width: 0; 
 
} 
 

 
    #left{ 
 
    flex: 0 0 180px; 
 
    min-height:100%; 
 
    min-width: 0; 
 
    background:lightblue; 
 
    } 
 
    #left.collapsed{ 
 
    flex: 0 0 80px; 
 
    } 
 
    
 
    #mid{ 
 
    flex: 1 1 auto; 
 
    min-height:100%; 
 
    min-width: 0; 
 
    display:flex; 
 
    flex-flow:column nowrap; 
 
    align-items:stretch; 
 
    align-content:stretch; 
 
    position:relative; 
 
    width:100%; 
 
    min-height:100vh; 
 
    min-width: 0; 
 
    background:purple; 
 
    } 
 
     #mid-top{ 
 
     flex: 0 0 auto; 
 
     min-height:100px; 
 
     background:green; 
 
     } 
 
     #mid-bottom{ 
 
     min-height:calc(100% - 100px); 
 
     flex: 1 1 auto; 
 
     background:lightgreen; 
 
     } 
 
     #list{ 
 
     overflow: auto; 
 
     width: 100%; 
 
     max-width: 100%; 
 
     } 
 
     #list.nowrap{ 
 
     white-space: nowrap; 
 
     } 
 
     #secondlist{ 
 
     overflow: auto; 
 
     max-width: 250px; 
 
     white-space: nowrap; 
 
     } 
 
     .list-item{ 
 
     display: inline-block; 
 
     width: 50px; 
 
     height: 50px; 
 
     margin: 2px; 
 
     background: purple; 
 
     } 
 
     .list-item.odd{ 
 
     background: violet; 
 
     } 
 
     
 
#help-pane{ 
 
    display:none; 
 
    flex: 0 0 0px; 
 
    background:red; 
 
} 
 
#help-pane.visible{ 
 
    display:inherit; 
 
    flex:0 0 180px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
<div id="shell"> 
 
     <div id="left"> 
 
      <div id="nav"> 
 
      - menu - 
 
      </div> 
 
      <div id="help-toggle"> 
 
      help toggle 
 
      </div> 
 
      <div id="nav-toggle"> 
 
      nav toggle 
 
      </div> 
 
      <div id="list-toggle"> 
 
      list whitespace toggle 
 
      </div> 
 
     </div> 
 
     <div id="mid"> 
 
      <div id="mid-top"> 
 
       - mid top - 
 
      </div> 
 
      <div id="mid-bottom"> 
 
       - mid bottom- <br><br> 
 
       <div id="list"> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       </div> 
 
       <hr> 
 
       <div id="secondlist"> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       <div class="list-item">&nbsp;</div> 
 
       <div class="list-item odd">&nbsp;</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</div> 
 
<div id="help-pane" class="visible"> 
 
    - help-pane - 
 
</div> 
 
</div>