#wrapper {

    width: 500px;

    border: 1px solid black;

    overflow: hidden; /* add this to contain floated children */

}

#first {

    width: 300px;

    float:left; /* add this */

    border: 1px solid red;

}

#second {

    border: 1px solid green;

    float: left; /* add this */

}

.my-div{

  overflow: hidden;

}

.my-div-1{

  overflow-x: hidden;/* Overflow from the div horizanlty will be hidden*/

  overflow-y: hidden;/* Overflow from the div vertically will be hidden*/

}

.scroll-div{

  height: 150px

  overflow: scroll;

  /* Add scrollbar to the div when its height exceded 150px*/

  /* Can be used horizanlty or vertically according to your layout*/

}

div{

overflow: scroll;

}

​

visible - Default. The overflow is not clipped. The content renders outside the element's box

hidden - The overflow is clipped, and the rest of the content will be invisible

scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content

auto - Similar to scroll, but it adds scrollbars only when necessary

CSS allows us to control the vertical or horizontal scrollbar with two properties.

​

overflow-x /*controls the horizontal scrollbar*/

overflow-y /*controls the vertical scrollbar*/

overflow-x /*and overflow-y have the same values as the overflow property*/

auto

scroll

visible

hidden

Shit, you didn't mean it, right?

#wrapper {

    width: 500px;

    border: 1px solid black;

    overflow: hidden; /* will contain if #first is longer than #second */

}

#first {

    width: 300px;

    float:left; /* add this */

    border: 1px solid red;

}

#second {

    border: 1px solid green;

    overflow: hidden; /* if you don't want #second to wrap below #first */

}

div {

  width: 200px;

  height: 65px;

  background-color: coral;

  overflow: visible;

}

#overflowTest {

  background: #4CAF50;

  color: white;

  padding: 15px;

  width: 50%;

  height: 200px;

  overflow: scroll;

  border: 1px solid #ccc;

}