Làm thế nào để ngăn ngừa các vật phẩm flex từ thùng chứa tràn?

Question

Làm cách nào để tạo mặt hàng flex (article trong ví dụ này), trong đó có flex-grow: 1;không phải là tràn phụ huynh/thùng chứa (main)?

Trong ví dụ này article chỉ là văn bản, mặc dù nó có thể chứa các yếu tố khác, bảng biểu, vv

main, aside, article { 
 
    margin: 10px; 
 
    border: solid 1px #000; 
 
    border-bottom: 0; 
 
    height: 50px; 
 
} 
 
main { 
 
    display: flex; 
 
} 
 
aside { 
 
    flex: 0 0 200px; 
 
} 
 
article { 
 
    flex: 1 0 auto; 
 
}

<main> 
 
    <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside> 
 
    <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article> 
 
</main>

Answer 1

mục flex bạn có

flex: 0 0 200px; 
flex: 1 0 auto; 

Điều đó có nghĩa:

• Người đầu tiên sẽ bắt đầu từ 200px rộng.

  Sau đó, nó sẽ không phát triển hoặc thu nhỏ.

• Thứ hai sẽ bắt đầu ở độ rộng do nội dung cung cấp.

  Sau đó, nếu có sẵn không gian, nó sẽ phát triển để trang trải nó.

  Nếu không nó sẽ không co lại.

Để ngăn chặn tràn ngang, bạn có thể:

• Sử dụng flex-basis: 0 và sau đó cho phép họ phát triển với một dương flex-grow.
• Sử dụng số dương flex-shrink để cho chúng co lại nếu không có đủ không gian.

Để ngăn chặn tràn đứng, bạn có thể

• Sử dụng min-height thay vì height để cho phép các mục flex phát triển hơn nếu cần thiết
• Sử dụng overflow khác so với nhìn thấy trên các mục flex
• Sử dụng overflow khác với hiển thị trên hộp chứa flex

Ví dụ,

main, aside, article { 
 
    margin: 10px; 
 
    border: solid 1px #000; 
 
    border-bottom: 0; 
 
    min-height: 50px; /* min-height instead of height */ 
 
} 
 
main { 
 
    display: flex; 
 
} 
 
aside { 
 
    flex: 0 1 200px; /* Positive flex-shrink */ 
 
} 
 
article { 
 
    flex: 1 1 auto; /* Positive flex-shrink */ 
 
}

<main> 
 
    <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside> 
 
    <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article> 
 
</main>