Ho creato un layout reattivo per un'applicazione utilizzando Flexbox. Il layout richiede un menu comprimibile a sinistra, un blocco con un'intestazione e un corpo nel mezzo e un riquadro di aiuto scorrevole sulla destra (c'è di più ma è la struttura di base).white-space: layout breakbox di break nowrap
Il menu di sinistra ha due stati: 180 px di larghezza o 80 px di larghezza. Il riquadro della guida è nascosto o occupa 180 px. La casella centrale prende il resto dello spazio. Flexbox funziona come un fascino.
Il problema si verifica quando eseguo uno scorrimento utilizzando white-space: nowrap. Ho un sacco di elementi che devono essere visualizzati in uno scroller orizzontale, quindi ho un elenco div con gli elementi, impostato su overflow:auto e white-space: nowrap.
Di solito questo funziona come un incantesimo, ma ora si rompe il mio layout flessibile. Invece di prendere la larghezza del div genitore (flex), lo scroller rende il div più ampio, il che a sua volta spinge il riquadro di aiuto fuori dai limiti.
Di seguito violino illustra questo problema:
http://jsfiddle.net/PieBie/6y291fud/
È possibile alternare l'aiuto-riquadro cliccando ginocchiera aiuto nella barra dei menu. Ricrea il problema facendo clic su nella casella di spunta dello spazio bianco nel menu, per attivare o disattivare la proprietà CSS dell'elenco white-space: no-wrap. Se il riquadro della guida è aperto, puoi vedere che viene espulso.
L'elenco in fondo è ciò che voglio ottenere, ma voglio che sia a larghezza intera del suo genitore.
Posso ricreare il problema in Chrome, Firefox, Opera, Vivaldi e Edge. Internet Explorer 11 suona bene (° _ °). Preferirei una soluzione CSS pura (SCSS è anche un'opzione), ma se necessario posso usare 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"> </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>
Sembra che tu stia incontrando l'impostazione dimensione minima * di default per gli elementi di flessione *. Un oggetto flessibile non può, di default, essere più piccolo della dimensione del suo contenuto. C'è una soluzione facile. http://stackoverflow.com/a/36247448/3597276 –