Overflow-x: hidden también oculta el contenido vertical también

Question

Tengo un DIV de 400px de ancho, que contiene dos DIV uno al lado del otro, cada uno con un ancho de 400px y una altura de 600px. El ancho de ambos DIV es fijo, sin embargo, la altura puede variar. Me gustaría ocultar el segundo DIV y mostrar el primero por completo, sin desplazamiento dentro del DIV.

Mi solución, pensé, era ocultar el overflow-x. Esto parece también ocultar el desbordamiento y también.

Aquí está mi código:

#schools-sub-nav { 
 
} 
 
#schools-container { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    background-color: fuchsia; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
#schools-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: purple; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#boards-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 400px; 
 
}

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div> 
 
<div id="schools-container"> 
 
    <div id="schools-list"> One </div> 
 
    <div id="boards-list"> Two </div> 
 
</div>

espero #schools-list a ser visibles, pero por alguna razón overflow-x: hidden en #schools-container esconde.

Answer 1

¡La forma en que hizo los dos divs (con una posición absoluta) anuló la regla de desbordamiento!

Necesita cambiar el tipo de posición (a normal/no absoluto) y sugiero usar flotadores, finalmente, el contenedor div al que desea aplicar el desbordamiento, debe tener una forma de encajarlo, como colocar un div al final con clear: both (en el caso de usar flotadores).

EDIT: Acabo de probarlo y puedes ocultar el segundo div siguiendo la sugerencia superior y agregando otro div circundante dentro con un ancho muy grande y cambiar el overflow-x al overflow para el contenedor principal div.

De esta manera:

<div id="schools-container"> 
    <div id="schools-container-inside"> 
    <div id="schools-list"> One </div> 
    <div id="boards-list"> Two </div> 
    </div> 
</div> 

Y entonces el CSS (os comentaba el original CSS no se utiliza, y añadió la nueva clase div al final):

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    /*overflow-x: hidden;*/ 
    overflow: hidden; 
} 
#schools-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: purple; 
    /* 
    position: absolute; 
    top: 0; 
    left: 0; 
    */ 
    float: left; 
} 
#boards-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: green; 
    /* 
    position: absolute; 
    top: 0; 
    left: 400px; 
    */ 
    float: left; 
} 
#schools-container-inside { 
    width: 10000px; 
    overflow: hidden; 
} 

jsFiddle aquí: http://jsfiddle.net/MbMAc/

Answer 2

Creo que necesita esto

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    overflow-x: hidden; 
    overflow-y:auto; 
    height:600px; 
} 

También necesita definir la altura del div principal.