Display: Flex verliert rechte Polsterung beim Überlaufen?

Question 1

Ich habe ein Problem mit einer CSS3-Flexbox.

Wenn ich das Flexbox-Element auf setze overflow und setze a min-width Wert für die Kinder, die richtige Polsterung am Elternteil geht verloren? Dies gilt für alle unterstützenden Browser.

Hier ist ein Beispiel für den Fehler. Wenn Sie nach rechts vom Container scrollen, sehen Sie, dass das letzte Kind hart an der rechten Kante des Containers anliegt, anstatt den Polsterungswert 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>

Weiß jemand warum das so ist und wie ich das beheben könnte? Ich habe mit rumgespielt padding und margin Werte in verschiedenen Kombinationen ohne Erfolg.

Question 2

Sie müssen eine weitere Wrapping-Ebene hinzufügen, wenn Sie beide “overflow-x:auto” mit scrollbarem Padding am Ende haben möchten.

Etwas wie das:

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

Question 3

Alternativ ist es möglich, die Ränder mit Pseudo-Elementen zu erstellen:

.outer::before { content: ''; min-width: 5px; }
.outer::after { content: ''; min-width: 5px; }

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
}
.outer::after { content: ''; min-width: 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>

Question 4

Beide Lösungen von Arthur Käpp und dholbert funktionieren. Wenn Sie sich jedoch dafür entscheiden, irgendwelche ‘Align-Items’ (Akzeptieren für Dehnung) in der Hauptflexbox zu verwenden, wird es wieder brechen. Es hat eine Weile gedauert, aber schließlich habe ich eine Lösung gekocht, die gut funktioniert.

Diese Lösung verwendet die Pseudoelemente:

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

.outer > div:last-child::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 10px;
    display: inline-block;
    margin-left: 10px;
}

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

Beachten Sie, dass in einigen Fällen die Angabe margin-left: 10px im Pseudo-Element nicht funktioniert. Sie können ein Recht verwenden: -10px, das auch funktionieren würde.

Question 5

Es gibt einen anderen Weg: Sie können ein anderes DIV-Item-flex -> TEXT_11 haben, dann setzen Sie MarginLeft = PaddingRight, wie Sie möchten

<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 style="margin-left: 5px" class="TEXT_11">&nbsp;</div>

</div>