css - flexbox html
tamaño de caja de flex-box: border-box no funciona (1)
podrías usar :not :
.cnr>div{
box-sizing: border-box;
overflow: hidden;
}
.cnr>div:not(.closed) {
border: 1em solid;
padding: 1em;
}
$(''.cnr'').on(''click'', function(){
$(this).find(''div'').toggleClass(''closed'');
})
.cnr {
display: flex;
height: 100%;
background-color: grey;
position: absolute;
border: 1px red solid;
}
.cnr>div{
box-sizing: border-box;
overflow: hidden;
}
.cnr>div:not(.closed) {
border: 1em solid;
padding: 1em;
}
.cnr>.closed {
width: 0;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 0;
min-width: 0;
min-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cnr">
<div>
open
</div>
<div class="closed">
closed
</div>
</div>
Esta pregunta ya tiene una respuesta aquí:
Como dice el título:
.cnr{
display: flex;
height: 100%;
background-color: grey;
position: absolute;
border: 1px red solid;
}
.cnr > div{
box-sizing: border-box;
padding: 1em;
border: 1em solid;
overflow: hidden;
}
.cnr > .closed{
width: 0;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
<div class="cnr">
<div>
open
</div><div class="closed">
closed
</div>
</div>
No se puede cerrar el segundo div utilizando width: 0 debido a relleno y borde.
¿Qué hacer?
No sé qué más detalles puedo agregar. Es un contenedor configurado para display: flex . Cada elemento flexible tiene un borde y relleno y algo de contenido (de texto). Hay 2 de ellos en total. Luego, algunos de ellos se cerrarán usando width: 0, y también cerrarán el borde y el relleno. box-sizing: border-box se usa el box-sizing: border-box .
Pero no funciona. Gracias.
Editar: bien, disculpe por no explicar con claridad, pero el ancho debe ser animado, es por eso que el relleno debe estar presente cuando se está reproduciendo la animación, y me gustaría no animar el relleno, si es posible.