div con una propiedad min-width configurada con scroll es recortado hacia la izquierda.
Estoy tratando de crear una página web con un solo div centrado que representa una hoja de papel. Es muy importante que el tamaño del papel nunca cambie, por lo que tiene las propiedades min-width y max-width configuradas:
body {
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
}
.paper {
width: 8.5in;
min-width: 8.5in;
max-width: 8.5in;
height: 11in;
min-height: 11in;
max-height: 11in;
background-color: red;
border: 10px solid black;
}
<!DOCTYPE html>
<html>
<body>
<div class="paper"></div>
</body>
</html>
El problema es que cuando el tamaño de la ventana del navegador es pequeño (por ejemplo, en dispositivos móviles), el lado izquierdo del div se corta y no se puede desplazar hacia él.
¿Cómo puedo hacerlo para que sea posible desplazarse hasta el borde izquierdo del div?
davy.ai
Para permitir desplazarse hasta el borde izquierdo de la div, puedes agregar
overflow-x: scroll;a la clase CSS.paper. Esto agregará una barra de desplazamiento horizontal que permitirá al usuario desplazarse hasta el borde izquierdo de la div cuando la ventana del navegador sea demasiado pequeña para mostrar toda su anchura.Aquí está el CSS actualizado para la clase
.paper:Con este cambio, la div ahora será desplazable horizontalmente y el borde izquierdo será accesible incluso cuando la ventana del navegador es pequeña.