CSS Flex-我有一个项目列表，可能需要使它们水平滚动并隐藏溢出

Question

I have 3 items inside a div.

This its container needs to be 100% widget with a horizontal scroll bar.

So like a carousel.

 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: flex; width: 500px; } .item { height: 200px; width: 100px; margin-right: 10px; } 

 <div class='wrapper'> <div class='content'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> </div> 

Outcome: I want the items to go horizontal with a scroll bar.

Currently the above code breaks my flex layout. I can do this easily without flex but I'm looking for a flex solution.

Answer 1

A flex item's flex-shrink defaults to 1 , which allow it to shrink, and since your item 's as well doesn't have any content keeping them at a certain width, they will.

Add flex-shrink: 0 to the item 's rule, and they won't.

Btw, since the flex: 1 1 0; set on wrapper , and being a "flex item" property, will only apply to the wrapper if its parent as well has display: flex .

---

Updated

If you make the content display inline-flex , you avoid the overflow of it, as an inline element grows with its content.

Stack snippet

 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: inline-flex; border: 2px dotted black; } .item { height: 160px; width: 250px; flex-shrink: 0; margin-right: 10px; background: red; } 

 <div class='wrapper'> <div class='content'> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> </div>