Anzeige: Flex verliert richtiges Polster beim Überlaufen?

Question

Ich habe ein Problem mit einer CSS3-Flexbox.

Wenn ich das Flexbox-Element auf overflow setzen und einen Wert min-width für die untergeordneten Elemente festlegen, wird die richtige Auffüllung auf dem übergeordneten Element verloren? Dies gilt für alle unterstützenden Browser.

Hier ist ein Beispiel für den Fehler. Wenn Sie zum rechten Rand des Containers blättern, sehen Sie, dass das letzte Kind hart gegen den rechten Rand des Containers steht, anstatt den Füllwert zu berücksichtigen.

.outer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 300px; 
 
    height: 80px; 
 
    border:1px #ccc solid; 
 
    overflow-x: auto; 
 
    padding: 5px; 
 
} 
 
.outer > div { 
 
    flex: 1 1 auto; 
 
    border: 1px #ccc solid; 
 
    text-align: center; 
 
    min-width: 50px; 
 
    margin: 5px; 
 
}

<div class="outer"> 
 
    <div>text1</div> 
 
    <div>text2</div> 
 
    <div>text3</div> 
 
    <div>text4</div> 
 
    <div>text5</div> 
 
    <div>text6</div> 
 
    <div>text7</div> 
 
    <div>text8</div> 
 
    <div>text9</div> 
 
    <div>text10</div> 
 
</div>

Wer weiß, warum das so ist und wie würde ich über die Korrektur ist es gelaufen? Ich habe mich mit padding und margin Werte in verschiedenen Kombinationen ohne Erfolg versammelt.

Answer 1

Sie müssen eine weitere Schicht hinzufügen, wenn Sie beide "overflow-x: auto" mit scrollbarem Padding am Ende haben wollen.

Etwas wie folgt aus:

.scroll { 
 
    overflow-x: auto; 
 
    width: 300px; 
 
    border:1px #ccc solid; 
 
} 
 
.outer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    box-sizing: border-box; 
 
    min-width: 100%; 
 
    height: 80px; 
 
    padding: 5px; 
 
    float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */ 
 
} 
 
.outer > div { 
 
    flex: 1 1 auto; 
 
    border: 1px #ccc solid; 
 
    text-align: center; 
 
    min-width: 50px; 
 
    margin: 5px; 
 
}

<div class="scroll"> 
 
    <div class="outer"> 
 
    <div>text1</div> 
 
    <div>text2</div> 
 
    <div>text3</div> 
 
    <div>text4</div> 
 
    <div>text5</div> 
 
    <div>text6</div> 
 
    <div>text7</div> 
 
    <div>text8</div> 
 
    <div>text9</div> 
 
    <div>text10</div> 
 
    </div> 
 
</div>