Layout overflow is one of the very important issues in css. If you create right layout it will remove a lot of potential bugs in the future.

So how do you create right layout?

1. Make sure all the elements pass to their children all the width/height they need, meaning that you pass children width: 100% or height: 100% or in case of grid sometimes min-width: 100%
2. Make sure elements that need to have overflow hidden, have that.

How to solve overflow bugs:

The main strategy is start from the element that you have bug and go up parent by parent. Let's check some popular cases:

1. Element doesn't take all the height, some list elements are not visible

In this case you go up parent by parent and check their height.

2. Element doesn't take all the width, some list elements are not visible

In this case you go up parent by parent and check their width.