Estoy tratando de tomar un div anidado y hacerlo desplazable, pero tengo algunas dificultades. El problema secundario es el div con la clase llamada "elementos".

<body>
  <div class="page-wrapper">
    <div class="header">Header</div>
    <div class="content-wrapper">
      <div>I want the div below to scroll</div>
      <div class="items">
        <div>item</div>       
        ...
      </div>
    </div>
  </div>
</body>
body {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  height: 100%;
  grid-template-rows: 50px 1fr;
}

.content-wrapper {
  height: 100%;
}

.items {
  overflow: scroll;
  height: 100%;
  width: 500px;
  background-color: #fafafa;
}


.header {
  background-color: orange;
}

Enlace Codepen: https://codepen.io/allencoded/pen/abdmwmQ?editors=1100

No estoy seguro de lo que está pasando. He configurado el desbordamiento de los elementos para que sea scroll, pensé que eso funcionaría pero parece que estoy equivocado. ¿Hay alguna manera de hacer que los .items se deslicen así? Si no, ¿por qué?

0
allencoded 16 jun. 2020 a las 02:12

3 respuestas

Reduzca la altura de la clase de elementos ya que 100% mostrará todos los contenidos.

1
John.P 15 jun. 2020 a las 23:25

Si establece el 100% en su propiedad de altura de la clase .items, su etiqueta <div> se expandirá hasta que se muestren todos los elementos anidados. Para habilitar su desplazamiento, la altura de <div> con la clase .items debe ser inferior a la que tendría si su div se expandiera para acomodar todas las etiquetas anidadas.

Intente establecer su propiedad de altura por debajo del 100% o en píxeles (100 píxeles, por ejemplo).

0
Daniel Karam 15 jun. 2020 a las 23:30

Tienes altura de encabezado por encima de lo que necesitas para disminuirlas

html,body {
  height: 100%;
   width:100%;
  overflow: hidden;
  display:block;
}

.page-wrapper {
,  grid-template-columns: 1fr;
  justify-content: center;
  height: 100%;
}

.content-wrapper {
    height: calc(100% - 60px);
}

.items {
  overflow: scroll;
  display:block;
  width: 500px;
  height: 100%;
  float:left;
  background-color: #fafafa;
}
.main{
  float:left;
  width:calc(100% - 500px);
}

.header {
  background-color: orange;
  height:50px;
  display:block
}
<body>
  <div class="page-wrapper">
    <div class="header">Header</div>
    <div class="content-wrapper">
      <div>I want the box below to scroll</div>
      <div class="items">
        <div>start</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>ending!</div>
      </div>
      <div class="main">content</div>
    </div>
  </div>
</body>
0
pc_coder 15 jun. 2020 a las 23:43