CODEWITHSUNDEEP
csscss-grid
Rodrigo
Rodrigo

Reputation: 577

How to prevent an automatic height row from expanding in a CSS Grid

I currently have a very simple design with three areas arranged vertically similar to header-body-foot. The central area has automatic overflow and looks like this:

three areas

And when the height of the content of the central area exceeds the height of the container:

three areas and a scrollbar in second

In previous version of the site, the height of the upper and lower areas is fixed on pixels and the height of the central area I obtain calculating calc(100vh - 24px - 80px) (simplifying).

Now I am converting all the layout of the site to CSS Grid, which has been in general quite easy. However on this simple page I have not been able to achieve that the central area of the grid has automatic height with respect to the browser window and, at the same time, show the scrollbar when the content exceeds this height.

This is a simplified html:

<html>
  <body>
    <div class='container'>
      <div class='area1'>
        Toolbar
      </div>
      <table class='area2'>
        <tbody>
          <tr>
            <td><input type='checkbox' checked></td>
            <td>Cell content 1</td>
          </tr>
          <tr>
            <td><input type='checkbox'></td>
            <td>Cell content 2</td>
          </tr>
          <tr>
            <td><input type='checkbox'></td>
            <td>Cell content 3</td>
          </tr>

          <!--append here many rows-->

        </tbody>
      </table>
      <div class='area3'>
        Details
      </div>
    <div>
  </body>
</html>

And the css:

.container {
    height: 100vh; /*I need to respect always this height*/
    display: grid;
    gap: 2px;
    grid-template-rows: 24px 1fr 80px;
    grid-template-areas: "area1" "area2" "area3";
}
.area1 {
    grid-area: area1;
    border: solid 1px;
}
.area2 {
    grid-area: area2;
    overflow-y: auto;
    border: solid 1px;
}
.area3 {
    grid-area: area3;
    border: solid 1px;
}

With this new layout and a large amount of table rows, the central area (the table) expands downward instead of being with a fixed height and a scrollbar, like this:

second area expanded

What I need is:

I have also tried it with grid-template-rows: 24px minmax(100px, 1fr) 80px and 24px auto 80px.

Is there any way to get it using CSS Grid?

Upvotes: 0

Views: 1181

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

The problem is the table itself. It's not adapting well to grid layout (at least in this case).

I suggest you wrap the table in a div, making the div the grid item.

Seems to work now.

.container {
  height: 100vh;
  /*I need to respect always this height*/
  display: grid;
  gap: 2px;
  grid-template-rows: 24px 1fr 80px;
  grid-template-areas: 
          "area1"
          "area2"
          "area3";
}

.area1 {
  grid-area: area1;
  border: solid 1px;
}

.area2 {
  grid-area: area2;
  overflow-y: auto;
  border: solid 1px;
}

.area3 {
  grid-area: area3;
  border: solid 1px;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}
<div class='container'>
  <div class='area1'>
    Toolbar
  </div>
  <div class="area2">
    <table>
      <tbody>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
        <tr>
          <td><input type='checkbox' checked></td>
          <td>Cell content 1</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 2</td>
        </tr>
        <tr>
          <td><input type='checkbox'></td>
          <td>Cell content 3</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class='area3'>
    Details
  </div>
  <div>

Upvotes: 1

Related Questions