Tengo una caja con tamaño fijo, su contenido crece dinámicamente en el eje x.
Intente aplicar overflow-x: scroll; sucede que muestra el scroll pero no cambia, cuando el contenido aumenta.
Analógicamente lo que intento hacer es apilar una caja al lado de la otra dentro de un contendedor con ancho fijo, a alcanzar el ancho fijo salga el scroll x al rescate, para que la cajas no bajen a una segunda linea y aparezca el no deseado scroll en eje y.
ulMenu {
float: left;
overflow: auto;
height: 100px;
width: 180px;
border-right: 1px solid;
background-color: aliceBlue;
}
nota: el ancho de este contenedor esta definido por un elemento padre.
Código:
<div id="menu" style="overflow: hidden; border: 1px solid black; height: 170px;overflow-x: scroll;">
<div class="ulMenu" id="default-options">
<div class="liMenu li-selected" id="1"> Tarjetas Madre</div>
<div class="liMenu" id="7"> element </div>
<div class="liMenu" id="10"> sub element 1</div>
<div class="liMenu" id="11"> sub element 2</div>
<div class="liMenu" id="12"> sub element 3</div>
<div class="liMenu" id="13"> sub element 4</div>
<div class="liMenu" id="14"> sub element 5</div>
<div class="liMenu" id="15"> sub element 6</div>
<div class="liMenu" id="16"> sub element 7</div>
<div class="liMenu" id="17"> sub element 8</div>
<div class="liMenu" id="18"> sub element 9</div>
<div class="liMenu" id="19"> sub element 10</div>
<div class="liMenu" id="20"> sub element 11</div>
</div>
<div class="ulMenu" id="dependent-options-7863">
<div id="2" class="liMenu li-selected"> element 1 </div>
</div>
<div class="ulMenu" id="dependent-options-6006">
<div id="3" class="liMenu li-selected"> element 2</div>
</div>
<div class="ulMenu" id="dependent-options-5758">
<div id="4" class="liMenu li-selected"> element 3</div>
</div>
<div class="ulMenu" id="dependent-options-8103">
<div id="5" class="liMenu li-selected"> element 4</div>
</div>
<div class="ulMenu" id="dependent-options-13192">
<div id="6" class="liMenu"> element 5</div>
<div id="8" class="liMenu"> element 6</div>
<div id="9" class="liMenu"> element 7</div>
</div>
</div>
saludos.