Creé un menú desplegable, usé el código fuente de mi proyecto real para que no haya confusión: -
.main-container { overflow-x: auto; } div.btn-dropdown-options { font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0; min-width: 180px; margin-top: 4px; overflow: auto; border: 1px solid rgba(0,0,0,0.05); border-radius: 8px; background: #fff; visibility: hidden; opacity: 0; transition: opacity 2s, visibility 2s; -webkit-box-shadow: 0px 1px 2px rgba(128,138,157,0.12),0px 8px 32px rgba(128,138,157,0.24); box-shadow: 0px 1px 2px rgba(128,138,157,0.12),0px 8px 32px rgba(128,138,157,0.24); }Tengo un menú desplegable div.btn-dropdown-options y un contenedor principal main-container . Cuando hago clic en el botón de alternancia para mostrar el menú desplegable, se corta debido a la propiedad de desbordamiento, he usado la posición: absoluta y el índice z: 1000; pero nada funciona, ¿cómo puedo mostrar el menú desplegable sobre el desbordamiento?
código completo: - https://jsfiddle.net/ur5sL4qv/
.main-container {overflow-x: auto; height: 100vh;}
o
div.btn-dropdown-options {position: relative;}
No estoy seguro de entender completamente el problema (sugiero usar colores de fondo para señalar lo que no se desea). Pero, ¿eliminar overflow-x de .main-container y agregar position: absolute a las opciones desplegables soluciona su problema?
.btn-dropdown .btn-dropdown-options { position: absolute; right: 0; }