Tengo un Loader en la sección derecha y quiero que siempre se ajuste al ancho de la sección. En el componente principal hay una imagen de fondo (Instruccion background-image) que rompe el ancho (width) del loader, o sea sobresale de la seccion derecha y necesitaria que se mantenga adentro. Me di cuenta que es por la instruccion background-image por que al sacarla, funciona el comportamiento esperado. ¿Saben cómo puedo solucionarlo?
Este es el código completo:
.principal {
margin: 0;
display: flex;
flex-direction: row;
min-height: 100%;
top: 0;
height: 480px;
background-image: url(https://media.istockphoto.com/photos/blue-background-picture-id996078816?k=6&m=996078816&s=612x612&w=0&h=frpQG7R-F3NK0rktec6xJvoKekFv8oaYd04VJ-Am6QE=); /* Break Loader width */
}
.left-section{
flex: 2;
display: flex;
justify-content: center;
}
.right-section {
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
background-color: #1b252e;
}
.loader-content {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
display: -ms-flexbox;
display: flex;
position: fixed;
z-index: 101;
top:0;
background-color: rgba(256,256,256,0.6);
}
.loader {
border: 2.5px solid transparent;
border-radius: 80%;
border-top: 2.5px solid red;
border-bottom: 2.5px solid red;
border-left: 2.5px solid red;
width: 30px;
height: 30px;
-webkit-animation: gktJjP 0.8s linear infinite;
-webkit-animation: gktJjP 0.8s linear infinite;
animation: gktJjP 0.8s linear infinite;
}
<div class="principal">
<div class="left-section">
left section
</div>
<div class="right-section">
right section
<div class="loader-content">
<div class="loader"></div>
</div>
</div>
</div>
background-image
de.principal
a.right-section