1

Mi problematica es la siguiente

introducir la descripción de la imagen aquí

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

4
  • Saludos si pudieras agregar una imagen solo de la zona donde se ve tu diseño por que así como esta ahorita es dificil distinguir, para que por favor no expliques mejor tu problema
    – BetaM
    el 15 dic. 2019 a las 19:09
  • @Aprendiz Es que el scroll oculta el lado derecho del contenido ¿porqué? el 15 dic. 2019 a las 19:18
  • Para poderte apoyar mejor tal vez será necesario agregues tu HTML de tal forma que podamos reproducir tu escenario y detectar el problema
    – BetaM
    el 15 dic. 2019 a las 19:19
  • @Aprendiz Listo el 15 dic. 2019 a las 19:21

1 respuesta 1

1

No consigo apreciar el problema que describes en la imagen, pero si tú problema es que se ve el overflow lo puedes corregir cambiando el overflow del eje horizontal en la clase row, por ejemplo así:

 .row{overflow-x: hidden}

Si el problema se encuentra en el otro eje, pues lógicamente sería overflow-y:

 .row{overflow-y: hidden}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.