Mi problematica es la siguiente
Estaba creando un diseño de listas, pero no sé porque las primeras dos en row permanecen en overflow en la izquierda ¿cómo solucionarlo?
Mi código CSS
En contain es para que se adapte al tamaño de la página
.contain {
position: absolute;
width: calc(100% - 14rem);
height: 93vh;
}
.row>.block {
padding: 0px 0px 0px 13px;
}
.row>.block>div {
text-align: center;
}
.row>.block>.head {
width: 468px;
align-content: center;
display: block;
margin-left: 0px;
margin-right: auto;
}
.row>.block>.content {
width: 500px;
padding: 0px 15px 0px 0px;
z-index: 999;
overflow-y: scroll;
height: 85vh;
}
Mi código HTML es el siguiente, ocupo Bootstrap
<div class="container-fluid overflow-auto contain">
<div class="row flex-row flex-nowrap">
<div class="block border border-dark">
<div class="head">
<div class="row">
<div class="col-4 border border-dark">No iniciada</div>
<div class="col-4 border border-dark">29/12/17</div>
<div class="col-4 border border-dark">ea</div>
</div>
<div class="row">
<div class="col-1 border border-dark">i</div>
<div class="col-5 border border-dark">GVE</div>
<div class="col-2 border border-dark">Prod1</div>
<div class="col-2 border border-dark">Prod2</div>
<div class="col-2 border border-dark">Prod3</div>
</div>
</div>
<div class="content">
<div class="row">
<div class="col-1 border border-dark">i</div>
<div class="col-5 border border-dark">GVEPVH0001</div>
<div class="col-2 border border-dark">1</div>
<div class="col-2 border border-dark">2</div>
<div class="col-2 border border-dark">3</div>
</div>
</div>
</div>
</div>
</div>
El chiste es tener un contenedor para cada lista de claves y listas las opciones que tiene de cada una