html - white-space: nowrap breaks flexbox layout -
this question has answer here:
i have created responsive layout app using flexbox. layout calls collapsible menu on left, block header , body in middle , toggleable help-pane on right (there's more that's basic structure).
the left menu has 2 states: 180px wide or 80 px wide. pane either hidden, or takes 180px. middle box takes rest of space. flexbox works charm.
the trouble starts when make scrolling div using white-space: nowrap. have bunch of items need displayed in horizontal scroller, have list div items, set overflow:auto , white-space: nowrap.
usually works charm, breaks flex layout. instead of taking width of parent (flex) div, scroller makes div wider, in turn pushes help-pane out of bounds.
the following fiddle illustrates issue:
http://jsfiddle.net/piebie/6y291fud/
you can toggle help-pane clicking toggle help in menu bar. recreate issue clicking list whitespace toggle in menu, toggles white-space: no-wrap css property of list. if help-pane open, can see gets pushed out of bounds.
the bottom list want achieve, want full width of parent.
i can recreate issue in chrome, firefox, opera, vivaldi , edge. internet explorer 11 plays nice (°_°). prefer pure css solution (scss option), if need can use js.
$('#nav-toggle').on('click',function(){ $(this).parent().toggleclass('collapsed'); }); $('#help-toggle').on('click',function(){ $('#help-pane').toggleclass('visible'); }); $('#list-toggle').on('click',function(){ $('#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"> 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"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> </div> <hr> <div id="secondlist"> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> </div> </div> </div> </div> <div id="help-pane" class="visible"> - help-pane - </div> </div>
this caused default flex-box behaviour, prevents flex-boxes of becoming smaller it's contents.
the solution issue setting min-width: 0 (or min-height: 0 columns) parent flex-boxes. in specific case (and in fiddle):
#shell{ flex: 1 1 auto; display:flex; flex-flow:row nowrap; position:relative; width:100%; min-height:100%; min-width: 0; /* 1 right here it!*/ } $('#nav-toggle').on('click',function(){ $(this).parent().toggleclass('collapsed'); }); $('#help-toggle').on('click',function(){ $('#help-pane').toggleclass('visible'); }); $('#list-toggle').on('click',function(){ $('#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"> 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"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> </div> <hr> <div id="secondlist"> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> <div class="list-item"> </div> <div class="list-item odd"> </div> </div> </div> </div> </div> <div id="help-pane" class="visible"> - help-pane - </div> </div>
Comments
Post a Comment