Ich habe mit Flexbox ein responsives Layout für eine App erstellt. Das Layout sieht ein zusammenklappbares Menü auf der linken Seite, einen Block mit einer Kopfzeile und einem Hauptteil in der Mitte und ein umschaltbares Hilfefenster auf der rechten Seite vor (es gibt noch mehr, aber das ist die Grundstruktur).
Das linke Menü hat zwei Zustände: 180 Pixel breit oder 80 Pixel breit. Das Hilfefenster ist entweder ausgeblendet oder nimmt 180 Pixel ein. Die mittlere Box nimmt den Rest des Platzes ein. Flexbox funktioniert wie ein Zauber.
Das Problem beginnt, wenn ich mit ein scrollendes div mache white-space: nowrap. Ich habe eine Reihe von Elementen, die in einem horizontalen Scroller angezeigt werden müssen, also habe ich eine Liste div mit den Elementen, die auf eingestellt sind overflow:auto und white-space: nowrap.
Normalerweise funktioniert das wie ein Zauber, aber jetzt bricht es mein Flex-Layout. Anstatt die Breite des übergeordneten (flex) div zu nehmen, macht der Scroller das div breiter, was wiederum das Hilfefenster aus dem Rahmen schiebt.
Die folgende Geige veranschaulicht dieses Problem:
http://jsfiddle.net/PieBie/6y291fud/
Sie können das Hilfefenster umschalten, indem Sie auf klicken Hilfe umschalten in der Menüleiste. Reproduzieren Sie das Problem, indem Sie auf klicken Listen-Leerzeichen umschalten im Menü schaltet dies um white-space: no-wrap CSS-Eigenschaft der Liste. Wenn das Hilfefenster geöffnet ist, können Sie sehen, dass es außerhalb der Grenzen verschoben wird.
Die untere Liste ist das, was ich erreichen möchte, aber ich möchte, dass sie die volle Breite ihres übergeordneten Elements hat.
Ich kann das Problem in Chrome, Firefox, Opera, Vivaldi und Edge nachstellen. Internet Explorer 11 spielt gut (°_°). Ich würde eine reine CSS-Lösung bevorzugen (SCSS ist auch eine Option), aber zur Not kann ich JS verwenden.
$('#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">
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"> </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>