Tengo un cajón material-ui basado en el cajón mini variant . Dentro del contenido del cajón, tengo un conjunto de pestañas basadas en las pestañas de los botones de prevención de desplazamiento . Estoy usando material-ui versión 4.12.3.
Desafortunadamente, las pestañas dentro del cajón se expanden más allá del ancho de la pantalla y agregan una barra de desplazamiento horizontal. Ver este codesandbox para el código y el ejemplo. Hubiera esperado que las pestañas solo llenaran el ancho del contenido del cajón y se pudieran desplazar, como en el ejemplo de material-ui.
¿Hay alguna forma de hacer que esas pestañas funcionen como lo hacen en el ejemplo de material-ui vinculado anteriormente, manteniendo la funcionalidad del cajón tal como está?
Publicando una respuesta aquí que amplía el comentario de NearHuscarl para cerrar esto.
Agregar overflowX: hidden al div de contenido en mi ejemplo lo arregló. Ver este codesandbox para el código actualizado.
El problema estaba ocurriendo porque el padre de las pestañas desplazables necesita tener overflowX: hidden para que funcione la funcionalidad de desplazamiento horizontal. De lo contrario, las pestañas desplazables solo hacen que se expanda el ancho de su padre. Más detalles sobre esta respuesta de stackoverflow vinculada por NearHuscarl