¿Hace que dos divs compartan la misma barra de desplazamiento?

Question

Dado dos divs que representan columnas incrustadas en un div más grande. Si el html "! Stuff" representa muchas filas de datos que excederían la altura del contenedor, ¿cómo lo configuro para que los dos col div se desborden y compartan una barra de desplazamiento de "contenedor"?

 

.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

Es necesario configurar una altura fija para el contenedor, de lo contrario se cambia de tamaño automáticamente para que divs La columna de ajuste interior. La propiedad overflow sólo debe definirse para el contenedor, ya que es el único elemento que se desplaza:

.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; 
}