1

No logro un grid que contenga un scroll en uno de sus elementos y que a su vez los elementos se ajusten.

main {
  display: flex;
  flex-direction:row;
  height: 500px;
  background: tomato;
}

aside {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 1rem;
}

.A {
  height: auto; 
  display: grid; 
}

.B {
  display: grid; 
  overflow-y: auto;
}

.D {
  overflow-y: auto;
}

.C {
  padding: 10px;
  background-color: #07f;
}

.E {
  background-color: #eee;
  padding: 10px;
}
<main>
<aside class="A">
  <div class="B">
    <div class="C">search</div>
    <div class="D">
      <div class="E">1</div>
      <div class="E">2</div>
      <div class="E">3</div>
      <div class="E">4</div>
      <div class="E">5</div>
      <div class="E">6</div>
      <div class="E">7</div>
      <div class="E">8</div>
      <div class="E">9</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
    </div>
    <div class="C">elemento que debe ajustarse al de arriba</div>
  </div>
</aside>

<aside class="A">
  <div class="B">
    <div class="C">search</div>
    <div class="D">
      <div class="E">1</div>
      <div class="E">2</div>
      <div class="E">3</div>
      <div class="E">4</div>
      <div class="E">5</div>
    </div>
    <div class="C">elemento que debe ajustarse al de arriba</div>
  </div>
</aside>
</main>
en el primer caso no hay problema porque hay overflow, pero en cuando no hay suficientes elementos me los espacia por el grid. He probado con height: min-content; y grid-auto-row: min-content parece que funciona pero en el primer caso el overflow deja de funcionar.

2
  • Tienes una clase B en el css, pero no el el html... para que es eso ?
    – Excorpion
    Commented el 9 jun. 2021 a las 16:55
  • @Excorpion He corregigo el código
    – Takyo
    Commented el 10 jun. 2021 a las 6:18

2 respuestas 2

2

Jugué un buen poco con los valores entre las clases A y C.
Aún no comprendo de donde viene la clase B, por lo que ha sido eliminada.

Lo importante es saber definir height y max-height, ambas usandose diferente.

Ahora lo último, es saber si esto se aproxima a lo que estás buscando o no.

main {
  display: flex;
  height: 500px;
  background: tomato;
}

aside {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 5px;
}

.A {
    height: auto;
    max-height: 470px;
}

.C {
  padding: 10px;
  background-color: lightblue;
}

.D {
  overflow-y: auto;
  max-height: 400px;
}

.E {
  background-color: orange;
  padding: 10px;
}
<main>
  <aside>
    <div class="A">
      <div class="C">searchC</div>
      <div class="D">
        <div class="E">1</div>
        <div class="E">2</div>
        <div class="E">3</div>
        <div class="E">4</div>
        <div class="E">5</div>
        <div class="E">6</div>
        <div class="E">7</div>
        <div class="E">8</div>
        <div class="E">9</div>
        <div class="E">10</div>
        <div class="E">11</div>
        <div class="E">12</div>
        <div class="E">10</div>
        <div class="E">11</div>
        <div class="E">12</div>
        <div class="E">10</div>
        <div class="E">11</div>
        <div class="E">12</div>
      </div>
      <div class="C">elemento que debe ajustarse al de arriba</div>
    </div>
  </aside>

  <aside>
    <div class="A">
      <div class="C">search</div>
      <div class="D">
        <div class="E">1</div>
        <div class="E">2</div>
        <div class="E">3</div>
        <div class="E">4</div>
        <div class="E">5</div>
      </div>
      <div class="C">elemento que debe ajustarse al de arriba</div>
    </div>
  </aside>
</main>

5
  • Me temo que no puedo darte por válido porque a la clase ´D´ le has puesto un tamaño prefijado, cuando este se desconoce, además de que ha dejado de ser un grid
    – Takyo
    Commented el 10 jun. 2021 a las 6:20
  • Y que valor quieres darle a la clase D ?? Por que solo es cosa de editar ese valor y ya.
    – Excorpion
    Commented el 10 jun. 2021 a las 13:33
  • @Takyo no has aparecido para solucionar tu detalle.
    – Excorpion
    Commented el 10 jun. 2021 a las 20:08
  • D es de tamaño indefinido/dinámico. Finalmente he encontrado una solución que acabo de publicar. Gracias por el esfuerzo.
    – Takyo
    Commented el 11 jun. 2021 a las 8:56
  • 1
    El tema es ese, nunca explicaste que D era un tamaño definido por algo más, es más, no has dicho que define el tamaño de D. De todos modos es eso, 1 valor lejos de la respuesta. De todos modos me agrada ver que hayas encontrado otra solución alterna ;)
    – Excorpion
    Commented el 11 jun. 2021 a las 13:13
0

Al final he conseguido solucionarlo, simplemente hay que trabajar el alineamiento de los elementos en vez de el tamaño de estos.

Finalmente añadí a la clase .A un align-content: flex-start; para que subiera todo arriba

Me ha sido muy útil este grid cheatshet

main {
  display: flex;
  flex-direction:row;
  height: 500px;
  background: tomato;
}

aside {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 1rem;
}

.A {
  height: auto; 
  display: grid;
  align-content: flex-start; /* este es el añadido*/
}

.B {
  display: grid; 
  /* aqui tambien funcionaria */
  /* align-content: flex-start; */
  overflow-y: auto;
}

.D {
  overflow-y: auto;
}

.C {
  padding: 10px;
  background-color: #07f;
}

.E {
  background-color: #eee;
  padding: 10px;
}   
<main>
<aside class="A">
  <div class="B">
    <div class="C">search</div>
    <div class="D">
      <div class="E">1</div>
      <div class="E">2</div>
      <div class="E">3</div>
      <div class="E">4</div>
      <div class="E">5</div>
      <div class="E">6</div>
      <div class="E">7</div>
      <div class="E">8</div>
      <div class="E">9</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
      <div class="E">10</div>
      <div class="E">11</div>
      <div class="E">12</div>
    </div>
    <div class="C">elemento que debe ajustarse al de arriba</div>
  </div>
</aside>

<aside class="A">
  <div class="B">
    <div class="C">search</div>
    <div class="D">
      <div class="E">1</div>
      <div class="E">2</div>
      <div class="E">3</div>
      <div class="E">4</div>
      <div class="E">5</div>
    </div>
    <div class="C">elemento que debe ajustarse al de arriba</div>
  </div>
</aside>
</main>

Tu Respuesta

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

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