Khi các mục flexbox bao bọc ở chế độ cột, vùng chứa không tăng chiều rộng của nó

174
Anders Tornblad 2015-11-25 00:55.

Tôi đang làm việc trên một bố cục flexbox lồng nhau sẽ hoạt động như sau:

Mức ngoài cùng ( ul#main) là một danh sách ngang phải mở rộng sang bên phải khi có nhiều mục hơn được thêm vào đó. Nếu nó phát triển quá lớn, nên có một thanh cuộn ngang.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

Mỗi mục của danh sách này ( ul#main > li) có một tiêu đề ( ul#main > li > h2) và một danh sách bên trong ( ul#main > li > ul.tasks). Danh sách bên trong này nằm dọc và nên quấn thành cột khi cần thiết. Khi quấn thành nhiều cột hơn, chiều rộng của cột sẽ tăng lên để có nhiều chỗ hơn. Việc tăng chiều rộng này cũng sẽ áp dụng cho mục chứa của danh sách bên ngoài.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

Vấn đề của tôi là các danh sách bên trong không bao bọc khi chiều cao của cửa sổ quá nhỏ. Tôi đã thử rất nhiều lần giả mạo với tất cả các thuộc tính flex, cố gắng làm theo các hướng dẫn tại CSS-Tricks một cách tỉ mỉ, nhưng không may mắn.

JSFiddle này cho thấy những gì tôi có cho đến nay.

Kết quả mong đợi (những gì tôi muốn) :

Kết quả thực tế (những gì tôi nhận được) :

Kết quả cũ hơn (những gì tôi nhận được vào năm 2015) :

CẬP NHẬT

Sau một số cuộc điều tra, điều này bắt đầu giống như một vấn đề lớn hơn. Tất cả các trình duyệt chính hoạt động theo cùng một cách và nó không liên quan gì đến việc thiết kế flexbox của tôi được lồng vào nhau. Các bố cục cột flexbox thậm chí còn đơn giản hơn từ chối tăng chiều rộng của danh sách khi các mục bao bọc.

JSFiddle khác này minh chứng rõ ràng vấn đề. Trong các phiên bản hiện tại của Chrome, Firefox và IE11, tất cả các mục đều được bọc chính xác; chiều cao của danh sách tăng ở rowchế độ, nhưng chiều rộng của nó không tăng ở columnchế độ. Ngoài ra, không có chỉnh lại ngay lập tức các phần tử khi thay đổi chiều cao của một columnchế độ, nhưng có trong rowchế độ.

Tuy nhiên, các thông số kỹ thuật chính thức (xem cụ thể ở ví dụ 5) dường như chỉ ra rằng những gì tôi muốn làm là có thể.

Ai đó có thể đưa ra giải pháp cho vấn đề này không?

CẬP NHẬT 2

Sau rất nhiều thử nghiệm sử dụng JavaScript để cập nhật chiều cao và chiều rộng của các phần tử khác nhau trong các sự kiện thay đổi kích thước, tôi đã đi đến kết luận rằng quá phức tạp và quá rắc rối để cố gắng giải quyết theo cách đó. Ngoài ra, việc thêm JavaScript chắc chắn phá vỡ mô hình flexbox, mô hình này cần được giữ sạch sẽ nhất có thể.

Hiện tại, tôi đang quay trở lại overflow-y: autothay vì flex-wrap: wrapđể hộp chứa bên trong cuộn theo chiều dọc khi cần thiết. Nó không đẹp, nhưng đó là một chặng đường về phía trước mà ít nhất không phá vỡ khả năng sử dụng quá nhiều.

4 answers

178
Michael Benjamin 2015-11-25 06:46.

Vấn đề

Điều này trông giống như một thiếu sót cơ bản trong bố cục linh hoạt.

Một vùng chứa linh hoạt theo hướng cột sẽ không mở rộng để chứa các cột bổ sung. (Đây không phải là vấn đề trong flex-direction: row.)

Câu hỏi này đã được hỏi nhiều lần (xem danh sách bên dưới), không có câu trả lời rõ ràng trong CSS.

Thật khó để xác định đây là một lỗi vì sự cố xảy ra trên tất cả các trình duyệt chính. Nhưng nó đặt ra câu hỏi:

Làm cách nào mà tất cả các trình duyệt chính đều có thể mở rộng vùng chứa linh hoạt khi bọc theo hướng hàng nhưng không theo hướng cột?

Bạn sẽ nghĩ rằng ít nhất một trong số họ sẽ làm đúng. Tôi chỉ có thể suy đoán về lý do. Có thể đó là một quá trình thực hiện khó khăn về mặt kỹ thuật và đã được xếp lại cho lần lặp lại này.

CẬP NHẬT: Sự cố dường như đã được giải quyết trong Edge v16.


Minh họa vấn đề

OP đã tạo một bản demo hữu ích minh họa vấn đề. Tôi đang sao chép nó ở đây: http://jsfiddle.net/nwccdwLw/1/


Tùy chọn giải pháp

Các giải pháp hack từ cộng đồng Stack Overflow:


Phân tích thêm


Các bài viết khác mô tả cùng một vấn đề

44
MandeeD 2019-04-19 08:13.

Đến muộn bữa tiệc, nhưng vẫn gặp phải vấn đề này HÀNG NĂM sau đó. Kết thúc việc tìm kiếm một giải pháp bằng cách sử dụng lưới. Trên hộp đựng bạn có thể sử dụng

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

Tôi có một ví dụ về CodePen chuyển đổi giữa vấn đề flexbox và sửa lỗi lưới: https://codepen.io/MandeeD/pen/JVLdLd

4
Dustin Kane 2020-07-21 07:23.

Tôi vừa tìm thấy một cách giải quyết CSS PURE thực sự tuyệt vời ở đây.

https://jsfiddle.net/gcob492x/3/

Điều khó khăn: đặt writing-mode: vertical-lrtrong div danh sách sau đó writing-mode: horizontal-tbtrong mục danh sách. Tôi đã phải điều chỉnh các kiểu trong JSFiddle (loại bỏ rất nhiều kiểu căn chỉnh không cần thiết cho giải pháp).

Lưu ý: nhận xét cho biết nó chỉ hoạt động trong các trình duyệt dựa trên Chromium chứ không phải Firefox. Tôi chỉ thử nghiệm cá nhân trong Chrome. Có thể có một cách để sửa đổi điều này để làm cho nó hoạt động trong các trình duyệt khác hoặc đã có các bản cập nhật cho các trình duyệt nói trên làm cho nó hoạt động.

Lời cảm ơn lớn cho nhận xét này: Khi các mục flexbox bao bọc ở chế độ cột, vùng chứa không tăng chiều rộng của nó . Tìm hiểu kỹ chuỗi vấn đề đó đã dẫn tôi đến https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39 , dẫn tôi đến JSFiddle này.

1
Steve Hanov 2020-06-27 05:11.

Thật không may là rất nhiều trình duyệt lớn bị lỗi này sau nhiều năm. Hãy xem xét một giải pháp thay thế Javascript. Bất cứ khi nào cửa sổ trình duyệt thay đổi kích thước hoặc nội dung được thêm vào phần tử, hãy thực thi mã này để thay đổi kích thước thành chiều rộng thích hợp. Bạn có thể xác định một chỉ thị trong khuôn khổ của mình để thực hiện nó cho bạn.

    element.style.flexBasis = "auto";
    element.style.flexBasis = `${element.scrollWidth}px`;

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language