CSS Grid one column to have max-height if other rows are less, but then to adjust taller if other rows are greater

Question

I have a simple CSS Grid which I would like the 3rd column to have special auto height adjustments. The grid style is:

.grid{
        display:grid;
        grid-template-columns: 7fr 10fr 15fr;
        border-top: 1px solid black;
        border-right: 1px solid black;
    }
    .grid > span{
        padding: 4px 4px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
    }

The span elements are:

<span class="new_data" style="">...........</span>
<span class="new_data" style="">............</span>
<span class="new_data" style="max-height: 400px; overflow: auto;">................</span>

The DETAILS column can be short or long. Would like this column to have the following height interactions:

1. When short - the row height adjusts to the content - OK (2nd row exmaple.)

2. When very long - the row height adjusts to the maximum of 400px with a scrollbar - OK (1st & 4th row)

3. When first 2 columns exceed height of 400px, I would like the Details column to automatically grow beyond 400px to match the height of the other 2 columns with a scrollbar if needed - NOT THE CASE NOW (3rd row). When this happens, the DETAILS height is pinned at 400px and there is a noticeable gap below. Would like this to auto grow to the height of the row when this happens.

How can this be accomplished? Javascript/Jquery solutions welcomed.

Answer 1

A Pure CSS solution would be a combination of max-height:450px; and min-height:100%

Percentage in this case refers to the grid row's height not the grid container, Which will be defined by the tallest element in the row.

/* Not needed for the solution */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 10px;
  border: 1px solid;
}


/* Not needed for the solution */


/* The solution */

[grid] {
  display: grid;
  grid-template-columns: 7fr 10fr 15fr;
  border-top: 1px solid black;
  border-right: 1px solid black;
  width: 400px;
  margin: 0 auto;
}

[details] {
  max-height: 450px;
  min-height: 100%;
  overflow: auto;
}

<div grid>
  <div flag>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </div>
  <div content>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </div>
  <div details> some text</div>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur epteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div content>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  </div>
  <div details>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in
  </div>
  <div content>
    Lorem ipsum dolor sit
  </div>
  <div details>
    I'm as tall as my tallest sibling.
  </div>
</div>

---

According to the spec There's a few voilations and their set computed value.

Case 1: Details is taller than 450px;

The Violation: height > max-height.

For this the computed height will be our max-height:450px

min-height:100% will have no effect because It's the details who's defining the height.

---

Case 2: Details is shorter than 450px;

The Violation: height < min-height.

For this the computed height will be our min-height:100% (as tall as the tallest sibling) But the key here is that the max-height is ignored completely.

This works for the two other cases.