css - flexbox html

tamaño de caja de flex-box: border-box no funciona

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Por qué tamaño de caja: border-box todavía muestra el borde con un ancho de 0px? 2 respuestas

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.

Answer 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>