Hiển thị: Flex mất đệm phải khi bị tràn?

Question

Tôi gặp sự cố với hộp tổ hợp CSS3.

Nếu tôi đặt phần tử flexbox thành overflow và đặt giá trị min-width cho trẻ em, phần đệm phải trên bố mẹ bị mất? Điều này nhất quán trên tất cả các trình duyệt hỗ trợ.

Đây là ví dụ về lỗi. Nếu bạn di chuyển sang bên phải của thùng chứa, bạn sẽ thấy đứa trẻ cuối cùng cứng lên trên cạnh phải của vùng chứa thay vì tôn vinh giá trị đệm.

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

Có ai biết tại sao điều này là gì và làm thế nào tôi sẽ đi về sửa chữa nó? Tôi đã rối tung với các giá trị padding và margin trong các kết hợp khác nhau mà không thành công.

Answer 1

Bạn cần phải thêm một lớp gói khác, nếu bạn muốn có cả "tràn-x: tự động" với đệm có thể cuộn ở cuối.

Something như thế này:

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