0
242
Vistas2 cuadros uno al lado del otro, el segundo cuadro sale de la pantalla
Estoy tratando de hacer 2 cuadros uno al lado del otro y en una pantalla más pequeña, el segundo cuadro sale de la pantalla así: 
Quiero que permanezca así hasta al menos 900 px de ancho, pero el problema cuando la pantalla es más grande, la brecha desaparece y luego se expande https://media.giphy.com/media/33a0O0ra1S3Ou8F7u0/giphy.gif
este es mi codigo
.boxes { background-color: blue; display: flex; justify-content: space-between; gap: 1rem; } .box { width: 820px; height: 300px; margin-left: 0.5rem; } .box-1 { margin-bottom: 0.5rem; background-color: antiquewhite; margin-right: 1.5rem; } .box-2 { position: absolute; left: 95%; background-color: cadetblue; } <div class="boxes"> <div class="box box-1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> </div> <div class="box box-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> </div> </div>2 Respuestas
Responde la pregunta0
¿Podría especificar el motivo por el que intenta posicionar (absolutamente) el elemento aquí?
Como puedo ver, podemos lograr el resultado final incluso sin posicionamiento. Nota: Aquí, no ha utilizado el posicionamiento de la manera correcta.
Otra cosa, para flexbox, la brecha funciona mejor en comparación con el margen. Solo revisa el código que he editado, verás.
Como desea que el ancho responda, dar el ancho en términos de porcentaje sería la opción adecuada.
.boxes { background-color: blue; display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem; } .box { width: 50%; height: 300px; } .box-1 { background-color: antiquewhite; } .box-2 { background-color: cadetblue; } <div class="boxes"> <div class="box box-1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> </div> <div class="box box-2"> <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque. </p> </div> </div>0
Puede agregar una consulta de medios para hacer eso. Agregue esto a su CSS:
@media all and ( min-width:900px) { .box-2 { position: relative; left: 0; } }