Flexbox: Wie kann man Divs dazu bringen, 100% der Containerbreite zu füllen, ohne sie zu verpacken?

Ich bin dabei, ein altes inline-blockGittermodell, das ich habe, auf ein neueres Flexbox-Modell zu aktualisieren, das ich erstellt habe. Alles hat gut funktioniert, bis auf einen kleinen Haken, der ein bisschen zum Dealbreaker geworden ist:

Ich habe eine Reihe von CSS-gesteuerten Schiebereglern. Es gibt also einen Wrapper mit 100% Breite, und im Inneren befindet sich ein weiteres Div: Seine Breite beträgt ebenfalls 100%, aber es white-spaceist auf eingestellt nowrap. Mit inline-blockbedeutet dies , dass die interne divs (die wurden auch auf 100% Breite eingestellt) nicht von ihren Eltern Zwänge und wickelt auf die nächsten Zeile gebunden werden - sie würden tragen nur von der Box auf ausströmt. Genau das wollte ich. Mit der Flexbox kann ich das jedoch überhaupt nicht zum Laufen bringen. Als Referenz hier ein Bild:

Und als Referenz hier eine jsFiddle der Sache, die mit Inline-Block arbeitet: http://jsfiddle.net/5zzvqx4b/

... und nicht mit Flexbox arbeiten: http://jsfiddle.net/5zzvqx4b/1/

Ich habe alle Arten von Variationen versucht , mit flex, flex-basis, flex-wrap, flex-grow, etc. , aber für das Leben von mir kann ich nicht an der Arbeit.

Beachten Sie, dass ich es zwingen kann, auf hackige, unflexible Weise das zu tun, was ich will, indem ich die .boxcontainerBreite auf setze 200%. Das funktioniert für dieses einzelne Beispiel, aber in einigen Fällen weiß ich nicht im Voraus, wie viele untergeordnete Boxen es geben wird, und ich würde lieber nicht auf Inline-Styling für jedes Element zurückgreifen, wenn dies möglich ist.

Stellen Sie den Flex-Schrumpfungsfaktor auf Folgendes ein, um zu verhindern, dass die Flex-Elemente schrumpfen 0:

Der Flex-Schrumpfungsfaktor bestimmt, um wie viel das Flex-Element im Vergleich zu den übrigen Flex-Elementen im Flex-Container schrumpft, wenn der negative freie Raum verteilt wird. Wenn weggelassen, wird es auf 1 gesetzt.

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

Sie können die Shorthand-Flex-Eigenschaft verwenden und auf festlegen

flex: 0 0 100%;

Das ist flex-grow, flex-shrinkund flex-basisin einer Linie. Das Flex-Schrumpfen wurde oben beschrieben, das Flex-Wachstum ist das Gegenteil und die Flex-Basis ist die Größe des Behälters.

In meinem Fall hat es einfach flex-shrink: 0nicht funktioniert. Aber das Hinzufügen flex-grow: 1hat funktioniert.

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