Cuando uso: <code>.carousel { width: 100%; padding: 30px; overflow: scroll; }</code> el scroll se desborda, porque suma el 100% del width...

Elias Bobadilla

Elias Bobadilla

Pregunta
studenthace 5 años

Cuando uso:

.carousel { width: 100%; padding: 30px; overflow: scroll; }

el scroll se desborda, porque suma el 100% del width más 30px de padding en cada lado, en los proyectos que realizo suelo solucionarlo así:

.carousel { width: calc(100vw - 60px); padding: 30px; overflow: scroll; }

pero no se, si sea una buena practica.

1 respuestas
para escribir tu comentario
    CRISTIAN BARBERO PÉREZ

    CRISTIAN BARBERO PÉREZ

    studenthace 5 años

    Hola, para evitar eso y no tener que calcular, es recomendable utilizar la siguiente propiedad, que lo calculará por ti:

    * { box-sizing: border-box; }
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!