html - examples - espacio en blanco: nowrap rompe el diseño de flexbox
flexbox html (1)
Esto se debe al comportamiento predeterminado de flex-box , que evita que flex-boxes se vuelva más pequeño que su contenido.
La solución a este problema es establecer min-width: 0 (o min-height: 0 para columnas) en todas las casillas de flexión principales. En este caso específico (y en el http://jsfiddle.net/PieBie/6y291fud/ ):
#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(){
$(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">
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>
Esta pregunta ya tiene una respuesta aquí:
He creado un diseño sensible para una aplicación utilizando Flexbox. El diseño requiere un menú plegable a la izquierda, un bloque con un encabezado y un cuerpo en el medio y un panel de ayuda que se puede alternar a la derecha (hay más, pero esa es la estructura básica).
El menú de la izquierda tiene dos estados: 180px de ancho o 80 px de ancho. El panel de ayuda está oculto o ocupa 180 px. El cuadro del medio toma el resto del espacio. Flexbox funciona como un encanto.
El problema comienza cuando hago un div de desplazamiento usando white-space: nowrap . Tengo un montón de elementos que deben mostrarse en un desplazador horizontal, por lo que tengo una lista div con los elementos, configurada para overflow:auto y white-space: nowrap .
Por lo general, esto funciona como un encanto, pero ahora rompe mi diseño flexible. En lugar de tomar el ancho del div principal (flex), el control de desplazamiento hace que el div se ensanche, lo que a su vez empuja el panel de ayuda fuera de los límites.
El siguiente violín ilustra este problema:
http://jsfiddle.net/PieBie/6y291fud/
Puede alternar el panel de ayuda haciendo clic en la ayuda de la barra de menús. Vuelva a crear el problema haciendo clic en la lista para activar el espacio en blanco en el menú, esto alterna la propiedad CSS de la lista de espacios en white-space: no-wrap . Si el panel de ayuda está abierto, puede ver que se desplaza fuera de los límites.
La lista de abajo es lo que quiero lograr, pero quiero que sea todo el ancho de su padre.
Puedo recrear el problema en Chrome, Firefox, Opera, Vivaldi y Edge. Internet Explorer 11 juega bien (° _ °). Preferiría una solución CSS pura (SCSS también es una opción), pero si es necesario, puedo usar 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">
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>