A quick tip that can help handle design cases that include child elements larger than their immediate parent.

I recently came across a problem that may be familiar to anyone who has tried to display a table full of data in a responsive view. You may think a library like Bootstrap will always scale elements gracefully to make sure your tables don’t break, but this isn’t always the case:

The problem seen here lies in the face that the table nested inside of a parent div element is wider than said parent. In the case of the above layout, the table has rows that will only get as small as 447 pixels wide, while the div can shrink well below that boundary.

Depending on the needs of your user interface, it may suffice to simply have a user scroll over to see the rest of the table if the screen they view your site or app on grows so small, it can no longer contain its wider, inner element(s). With the application of the CSS property overflow-x this can be accomplished easily.

An Interactive Example

The below jsfiddle demonstrates what this property does. We apply the property to a container element, setting the value to ‘scroll’. This causes a scrollbar to appear, indicating that the inner element (along with its table) can have the rest of its overflowing content shown by scrolling to the right.

Return home