Non-Wrapping CSS Flex mit festen Breiten

Question

Ich baue eine Karussell-Komponente, habe aber einige Schwierigkeiten, es zur Arbeit zu bekommen genau richtig.

Meine grundlegende Vorgehensweise ist ein div (Wrapper) mit vielen anderen divs (items) drin. Ich möchte 4 Objekte auf dem Karussell gleichzeitig anzeigen. Die Artikel haben verschiedene Inhaltshöhen, aber die Höhe der Artikel sollte gleich sein (zum größten erforderlichen).

Ich kann nicht die CSS-Kombination erarbeiten, die ich brauche, damit dies richtig funktioniert.

Mit this setup (HTML + CSS am Ende der post), die width: 25%; auf jeden item-container wird ignoriert.

Wenn ich eine feste mit .item hinzufügen, dann die 25% kickt, aber die Artikelbreite ist unbekannt - es hängt von der Größe des Browsers ab. Wenn Sie 1000px einstellen, verlieren Sie den Inhalt des Elements. Die Einstellung ~ 210px funktioniert, aber wenn Sie Ihren Browser verkleinern, verlieren Sie den Inhalt. In einem großen Browser haben Sie übermäßige Abstände.

Kurioserweise, wenn ich flex-wrap: wrap zum CSS hinzufüge, dann wird die 25% Breite korrekt angewendet - aber ich kann das nicht tun, denn dann ist es kein Karussell! Example

Das Szenario ist einfach: Eine unbekannte Menge der Elemente in einem div mit overflow: auto, die gleichen Höhen sind angezeigt werden sollen, mit 4 der Kinder divs auf dem Bildschirm zu jeder Zeit.

Mein HTML ist wie folgt strukturiert:

<div id="container"> 
    <div id="wrapper"> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #1 with some quite long text. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #2. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #3. 
     </p> 
     </div> 
    </div> 
    ... 
    </div> 
</div> 

Meine CSS:

#container { 
    width: 100%; 
    background: #0f0; 
    overflow: auto; 
} 

#wrapper { 
    display: flex; 
} 

.item-container { 
    border: 1px solid #f00; 
    width: 25%; 
} 

Hinweis, diese MCVE meine ist. Auf meiner realen Komponente habe ich Tasten zum Scrollen nach links und rechts, der Inhalt ist wesentlich komplexer und so ähnlich.

Answer 1

Alles, was Sie brauchen, ist flex: 0 0 auto zu .item-container Elemente hinzufügen.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background: #0f0; 
 
    overflow: auto; 
 
} 
 

 
#wrapper { 
 
    display: flex; 
 
} 
 

 
.item-container { 
 
    border: 1px solid #f00; 
 
    flex: 0 0 auto; 
 
    width: 25%; 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #1 with some quite long text. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #2. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #3. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #4. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #5. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #6. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #7. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>