html - Css - set overflow: hidden on container of floated elements -

Why is that overflow: hidden in .wrapper And the width: 100px , does it still show all three .item elements? I just wanted to hide one (first of them) and others, but the underlying, .item should be in the same line, so I can animate the sliding.

Sorry, edited JSFIDDLE link:

HTML

  & lt; Div class = "wrapper" & gt; & Lt; Div class = "itemWrapper" & gt; & Lt; Div class = "item one" & gt; & Lt; / Div & gt; & Lt; Div class = "item b" & gt; & Lt; / Div & gt; & Lt; Div class = "item c" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS

 . Warper {width: 100px; Height: 100px; Hidden flurry; } .item {width: 100px; Height: 100px; Swim left; } .itemWrapper {width: 300px; Height: 100px; Hidden flurry; } .a {background color: red; }. B {background-color: blue; }. C {background-color: yellow; }  

You have a typo in your jsfiddle

  Html, body, div {box-size: border-box; Padding: 0; Margin: 0; Range: 0;}; & Lt; - He; Your next The wiper invalidates the square. If you remove it then it's all right.