I have a list of items in an unordered list inside a div with overflow hidden. The items in the list are represented by boxes with text content and a border round them. It can be a long list of useful, but not essential information, that can be hidden if used on a smaller device.

If some items in the list overflow, I would like to set the entire item that overflows as hidden, not just part of it.

Currently, the list can look like this when clipped:

---------
|   A   |
|       |
---------

---------
|   B   |

Since B overflows only half of it is displayed. I would like only A to be displayed if this occurs.

The items do not have to be in an unordered list, can be in whatever. Is it any way to do this using only HTML and CSS?

html css flexbox
Edit
Report