Hỏi về cách hiển thị các element vượt ngoài màn hình trong css

hoalaxanh123 · March 19, 2022, 12:24pm

Chào cả nhà,
Mình đang học css tới đoạn flex box, mình đang có cái chưa biết giải quyết như thế này:
Codepen.IO

Mình có làm cái chart như này:

Nó show trên máy tính hoặc các thiết bị màn lớn thì âu kê, nhưng tới cái màn nhỏ như điện thoại thì:

Thấy mà gớm, các cột nó dính vô nhau. Mình muốn làm cái có thể scroll thể trượt ngang qua xem như bình thường ấy, mình có tìm hiểu thêm thì có cái là overflow-x: scroll, nhưng bỏ vô thấy nó vẫn rứa, có show scroll bar mà lăn không được.Nhờ mọi cười coi giúp thử mình đang bị cái gì. Code của mình Codepen.IO.

Chân thành cảm ơn cả nhà.

Update:
Hiện tại mình đã kiếm được giải pháp ở > đây <, người có thể coi thử.

Giờ mình muốn hỏi thêm:

Mình muốn học thêm cách không show scroll bar nhưng vẫn lướt qua để coi nội dung tiếp theo được ấy, không biết có cách nào không mọi người nhỉ?
Nếu được mọi người gợi ý thêm xem ngoài dùng scroll bar thì người ta còn có thể dùng gì không nhá.

hoalaxanh123 · March 19, 2022, 12:24pm

Mình kiếm được giải pháp rồi, cảm ơn cả nhà.
Mình gửi lại cho ai cần

noname00 · March 19, 2022, 1:45pm

Bạn chỉ cần ẩn scrollbar đi là được

* {
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

(code chôm có chỉnh sửa code từ w3school)

hoalaxanh123 · March 19, 2022, 1:35pm

Hay thiệt, cảm ơn bác,mỗi ngày biết thêm một chút