css - grow - Flexbox: ¿cómo hacer que los divs llenen el 100% del ancho del contenedor sin envolver?

flexbox grid

Question

Estoy en el proceso de actualizar un viejo modelo de cuadrícula basado en inline-block en inline-block que tengo para un Flexbox más nuevo que creé. Todo ha funcionado bien, aparte de un pequeño obstáculo, que se ha convertido en un poco un rompe tratos:

Tengo un montón de controles deslizantes controlados por CSS; así que hay una envoltura contenedora con 100% de ancho, y en el interior hay otra div: su ancho también es de 100%, pero su white-space está configurado para nowrap . Al usar inline-block , esto significaba que los divs internos (que también se establecieron en 100% de ancho) no estarían limitados por las restricciones de sus padres y se ajustaban a la siguiente línea; simplemente seguirían saliendo de la caja. Esto es exactamente lo que quería. Sin embargo, no puedo hacer que esto funcione con flexbox. Para referencia, aquí hay una imagen:

Y para referencia, aquí hay un jsFiddle de la cosa que trabaja con inline-block: http://jsfiddle.net/5zzvqx4b/

... y no funciona con Flexbox: http://jsfiddle.net/5zzvqx4b/1/

He intentado todo tipo de variaciones con flex , flex-basis , flex-wrap , flex-grow , etc. pero por mi vida no puedo hacer que esto funcione.

Tenga en cuenta que puedo forzarlo a que haga lo que quiera de una manera .boxcontainer inflexible si configuro el ancho de .boxcontainer en 200% . Eso funciona para este ejemplo único, pero en algunos casos no sabré de antemano cuántas cajas para niños habrá, y preferiría no recurrir al estilo en línea en cada elemento si es posible.

Answer 1

En mi caso, solo usando flex-shrink: 0 no funcionó. Pero añadiendo flex-grow: 1 a funcionó.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}

Answer 2

Para evitar que los elementos flexibles se contraigan, establezca el factor de reducción flexible en 0 :

El factor de contracción flexible determina cuánto se contraerá el elemento flexible en relación con el resto de los elementos flexibles en el contenedor flexible cuando se distribuye el espacio libre negativo. Cuando se omite, se establece en 1.

.boxcontainer .box {
  flex-shrink: 0;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}

<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>

Answer 3

Puede usar la propiedad de taquigrafía flex y establecerla en

flex: 0 0 100%;

Eso es flex-grow , flex-shrink y flex-basis en una línea. La contracción por flexión se describió anteriormente, el crecimiento por flexión es lo opuesto y la base por flexión es el tamaño del contenedor.