Comment redimensionner un élément et occuper tout l'espace restant?

Question

J'ai une grille avec 3 sections. Ce que je veux, c'est que la section "map" du milieu soit redimensionnable et quand elle est réduite, la section "points" s'étendra pour occuper tout l'espace restant.

#grid { 
 
    display: grid; 
 
    grid-template-rows: 1fr 6fr 2fr; 
 
    grid-template-areas: 
 
      "slider" 
 
      "map" 
 
      "points"; 
 
    width: 200px; 
 
    height: calc(100vh - 10px); 
 
} 
 

 
.one { 
 
    grid-area: slider; 
 
    background-color: yellow; 
 
} 
 

 
.three { 
 
    grid-area: points; 
 
    background-color: green; 
 
} 
 

 
.resizeme { 
 
    grid-area: map; 
 
    resize: vertical; 
 
    overflow: auto; 
 
    background-color: orange; 
 
    
 
}

<div id="grid"> 
 
  <div id="item1" class="one">hello1</div> 
 
  <div id="item2" class="resizeme">you can resize me</div> 
 
  <div id="item3" class="three">three</div> 
 
</div>

Answer 1

Au lieu d'utiliser fr pour la hauteur de l'élément redimensionnable, utilisez auto. Ensuite, définissez une hauteur minimale, si vous le souhaitez, sur l'élément lui-même.

#grid { 
 
    display: grid; 
 
    grid-template-rows: 1fr auto 2fr; 
 
    grid-template-areas: "slider" "map" "points"; 
 
    width: 200px; 
 
    height: calc(100vh - 10px); 
 
} 
 

 
.one { 
 
    grid-area: slider; 
 
    background-color: yellow; 
 
} 
 

 
.three { 
 
    grid-area: points; 
 
    background-color: green; 
 
} 
 

 
.resizeme { 
 
    grid-area: map; 
 
    resize: vertical; 
 
    overflow: auto; 
 
    background-color: orange; 
 
    /* min-height: 50px; */ 
 
}

<div id="grid"> 
 
    <div id="item1" class="one">hello1</div> 
 
    <div id="item2" class="resizeme">you can resize me</div> 
 
    <div id="item3" class="three">three</div> 
 
</div>