Make two divs the same scrollbar?

Question

Given two divs that represent columns embedded in a large div. If the "! Stuff" html represents many lines of data that exceed the height of the container, how do I adjust it so that the two col columns overflow and separate one scrollbar from the "container"?

.container {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   
}

.col1 {
    height: 100%;
    width: 50%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    float: left;
}

.col2 {
    height: 100%;
    width: 50%;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    float: right;
}

<div class="container">
  <div class="col1">
    !Stuff<br/>
  </div>

  <div class="col2">
    !Stuff
  </div>
</div>

Answer 1

, , . overflow , , :

.container {
    height: 300px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    padding-bottom: 30px;   
}

.col1 {
    height: 100%;
    width: 50%;
    position: relative;
    float: left;
}

.col2 {
    height: 100%;
    width: 50%;
    position: relative;
    float: right;
}