How can I make an element resize and take up all remaining space?

Question

I have a grid with 3 sections. What I want is the middle "map" section to be resizeable and when it's made smaller then the "points" section will expand to take up all the remaining space.

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

Any JavaScript allowed? If yes, is [this](https://stackoverflow.com/a/8960307/4906586) a good start? the `doDrag` can be overridden and extend the above / below section — Al-un, Sep 28 '17 at 19:07

score 4 · Accepted Answer · answered Sep 28 '17 at 19:08

Instead of using fr for the height of the re-sizable element, use auto. Then set a minimum height, if you want, on the item itself.

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

How can I make an element resize and take up all remaining space?

1 Answers1