Display: Flex perde il riempimento destro in caso di traboccamento?

Question

Ho un problema con una flexbox CSS3.

Se si imposta l'elemento flexbox su overflow e si imposta un valore min-width per i bambini, il riempimento destro sul genitore viene perso? Questo è coerente su tutti i browser di supporto.

Ecco un esempio dell'errore. Se scorri verso destra del contenitore, vedrai che l'ultimo bambino è duro contro il bordo destro del contenitore invece di rispettare il valore del padding.

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

Qualcuno sa perché questo è e come vorrei andare a correggere esso? Ho combinato con i valori padding e margin in diverse combinazioni senza successo.

Answer 1

È necessario aggiungere un altro livello di avvolgimento, se si desidera che sia "overflow-x: auto" con riempimento scorrevole alla fine.

Qualcosa di simile a questo:

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