Skip to main content
Añadido contenido
Origen Enlace
Takyo
  • 955
  • 1
  • 7
  • 30

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

finalmenteFinalmente 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>

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

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>

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>

Origen Enlace
Takyo
  • 955
  • 1
  • 7
  • 30

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

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>