Tengo una navegación inferior que contiene 5 elementos. Cuando cambia el tamaño de la ventana a menos de 400 px, la navegación inferior no "aprieta", por así decirlo; permanece en un mínimo de 400 px, lo que significa que aparece una barra de desplazamiento para el eje x.

Puede ver un ejemplo reproducible mínimo aquí: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&solutionWidth=400&solutionHeight=675

En el ejemplo, el ancho mínimo en realidad parece ser marginalmente más ancho y siempre se desborda un poco, pero el principio sigue siendo el mismo.

Lo que debo hacer es asegurarme de que el relleno/espacio en blanco entre los elementos se aprieta cuando hay una pantalla de menos de 400 px. Intenté anular manualmente el relleno tanto en el sx del componente BottomNavigation como con la utilidad de styled . Con styled , eliminé el relleno del último elemento secundario, pero luego todo el relleno del resto de los elementos creció para llenar siempre 400 px.

Entiendo que siempre hay un límite; No puedo esperar tener 5 elementos en una pantalla ancha de 200 px. Pero debería poder ir un poco por debajo de 400px. Nota: si solo tengo 4 elementos, cambia el tamaño perfectamente.

Aquí está mi código actualmente:

 <BottomNavigation value={value} onChange={(_, index) => { getPageIndex(index); }} sx={{ maxWidth: "100vw" }} > // 5 nav icons </BottomNavigation>