如何在 CSS 中隐藏超出父级宽度的子元素

Question

The parent has red dashed border, and the children elements are filled with blue. It can be implemented by inline-block , float , flex , etc.

I want to implement such effect: when the parent's width gets too small to contain the last children element, then the last element will be hidden.
How to implement this with pure CSS or with minimal JavaScript?

Answer 1

Setting the overflow property of the parent container to hidden can do that for you.

Answer 2

If your html structure is static, you can try to look into media queries. Otherwise, i'm not sure it would be possible in CSS.

Using overflow: hidden on your parent element will not make the last child desappear until it totaly overflow.

Answer 3

There is a way to do this using max-width , max-height and overflow , like the example below:

 .parent { max-width: 400px; max-height: 60px; overflow: hidden; border: 1px dashed #ddd; }.child { width: 100px; height: 50px; margin: 5px; background-color: blue; display: inline-block; color: white; text-align: center; }

 <p>There are 5 items here</p> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div>

And here is another example using flex instead of display: inline block ; with max-width , max-height and overflow too

 .parent { display: flex; border: 1px dashed #ccc; max-width: 380px; max-height: 60px; overflow: hidden; flex-wrap: wrap; }.child { background-color: blue; width: 100px; height: 50px; margin: 5px; }

 <pAnother example, using flex, with 5 items too</p> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div>