Adjust the height of CSS Grid's first column based on the heights of the other rows, setting a maximum height if they are shorter and expanding if they are

I am working with a CSS Grid where I need the 3rd column to dynamically adjust its height. Here is the grid style:

.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 may vary in height, and I want specific interactions for it:

  1. For shorter content - the row adjusts accordingly - This works fine (example of the 2nd row).

  2. For very long content - the row adjusts up to a maximum of 400px with a scrollbar - This also works fine (examples of the 1st and 4th rows).

  3. If the first 2 columns exceed 400px in height, I want the Details column to automatically grow beyond 400px to match their height, with a scrollbar if necessary - Currently, this is not happening (as seen in the 3rd row). In such cases, the DETAILS column's height remains at 400px with a gap below. I would like it to automatically adjust to the row's height.

How can this be achieved? I am open to Javascript/Jquery solutions.

https://i.sstatic.net/MvUn1.png

javascriptjqueryhtmlcsscss-grid

Answer №1

A great way to handle this using only CSS is by utilizing both max-height:450px; and min-height:100%

In this scenario, the percentage refers to the height of the grid row rather than the grid container itself. The height will be determined by the tallest element in that specific row.

/* Not necessary for this solution */

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

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


/* Not necessary for this 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>

As outlined in the specifications, there are specific violations and how they affect computed values.

Scenario 1: Details exceeds 450px;

The Issue: height > max-height.

In this case, the calculated height will adhere to our defined max-height:450px

The min-height:100% will not impact the outcome since the details element dictates the height.

Scenario 2: Details falls short of 450px;

The Issue: height < min-height.

If this occurs, the resulting height will match min-height:100% (equivalent to the tallest sibling's height). Interestingly, the max-height parameter is disregarded entirely.

This logic holds true for other similar cases as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with checkboxes on Safari for iOS

Problem Image My problem is specific to iOS Safari - the checkbox functions properly on other platforms, and I am unable to inspect it for styling. Interestingly, it works fine on web Safari as well. ...

htmlcssmobile-safari

Nested asynchronous mapping in Node.js involving multiple HTTP requests

Currently, I am attempting to iterate through an array of URLs and retrieve responses from a specific set of URLs. The goal is for the outer loop to only proceed after all inner requests have been completed, resulting in the desired outcome as shown below: ...

javascriptnode.jsasynchronous

What is the reason for AngularJS rendering boxes in a new row during loop iterations

I have a collection of items that I would like to showcase next to each other in rows. The static HTML code I have currently works perfectly. <div> <div class="box"></div> <div class="box"></div> <div class="b ...

javascripthtmlcssangularjs

As soon as a key is pressed in tinyMCE, the tracking continues until reaching the conclusion of the initial <

I am attempting to capture, in real-time, the user input in the .content textarea and paste it into the .intro. I have tried the following code without success: //This code is specifically for tinymce, as I am using tinyMCE as a rich text editor for textb ...

javascriptjqueryhtmltinymce

How can you dynamically set a date range using jQuery Datepicker, utilizing both the methods setDate and (minDate and maxDate)?

Within my interface, I have a dropdown menu where I can select the year, alongside another calendar field that utilizes a datepicker feature. The desired functionality is as follows: when I choose the year 2021 from the dropdown, the default date should a ...

javascriptjquerydatepickercalendarjquery-ui-datepicker

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

How can I stop a checkbox from being checked if the confirm box is canceled in AngularJS?

Whenever I click on a checkbox, a confirmation box pops up. When I click "OK," the checkbox gets checked, which is what I want. However, if I click "CANCEL" in the confirm box, the checkbox still gets checked. How can I prevent this from happening? Here&a ...

jqueryangularjs

Implementing TestCafe with a Rails backend and utilizing fixtures data for testing

Currently, I am involved in a Rails project that utilizes RSpec for testing. We rely on various Rails fixture data to test our UI under different conditions. Recently, I came across TestCafe for handling functional UI testing, and I find it quite intrigui ...

javascriptruby-on-railstestingrspectestcafe

What is the best way to enclose a block of content with <div> and </div> tags using the append() function?

My goal is to add an outer div container by first appending it, then adding content, and finally appending the closing tag. However, I'm encountering an issue where the div I added at the beginning automatically closes itself, resulting in two separat ...

javascriptjqueryhtml

What could be the reason why readyState is not equal to 4?

I've been trying to figure out how to use Ajax to fetch data from a database, but I'm encountering some issues... The problem arises when I submit the query and nothing appears on the screen... I understand that this issue is related to the read ...

javascriptphpajaxdebuggingreadystate

Encountering an issue with JQuery when attempting to create a double dropdown SelectList. Upon submitting the POST request, the output received is always

Two dropdownlists have been created, where one acts as a filter for the other. When selecting a customer from the dropdown Customer, only a limited set of ClientUsers is displayed in the dropdown ClientUser. This functionality is achieved using a jQuery fu ...

javascriptjqueryasp.netasp.net-core

What occurs when a JavaScript variable is assigned a nonexistent variable?

When it comes to setting a javascript variable, I'm assigning it with a value as var newline = $("#newline").val(); It's important to note that the $("#newline").val() may or may not exist. Sometimes, the #newline may not be present in the DOM, ...

javascriptjquery

Stop the flow of data in the RxJS stream depending on a specific value within the stream

I developed a straightforward component featuring a single button that initiates and halts a sequence of numbers generated by RxJS timer. import { Component, OnInit } from '@angular/core'; import { BehaviorSubject, Observable, timer, merge } fro ...

javascriptangularrxjs

Tips for building a modal box with HTML, CSS, and jquery!

Looking to create a modal box using HTML, CSS, and jQuery? <button id="myBtn">Click here to open the Modal</button> This code will help you achieve that: <!-- This is the Modal content --> <div class="modal-content"> <sp ...

jqueryhtmlcss

Guide on verifying internet connection status using Ajax request

Ensuring authentication by checking the availability of network connection on mobile devices. To do this, we must have both a username and password. The authentication process will be conducted online, requiring an active internet connection on the device. ...

javascriptjqueryajaxcordovajquery-mobile

If you refer to a function, are you personally calling the function or asking the reference to call it?

From what I understand, and please correct me if I'm mistaken, when a variable is assigned to a function in the form of a function expression, it doesn't hold the function in the same way that it holds a primitive value. The variable simply refer ...

javascript

Is there a way for me to move to the next row while navigating to the right using the keyCode function?

I am working with a table that has three columns. The first column contains text, while the second and third columns have input fields. I can navigate within a row using keyCode to move to the right, but once I reach the last column, I am unable to jump to ...

javascriptangulartypescriptkeycode

Tips for extracting content within a div without targeting a specific child element

<div class="news"> This is the important content <figure class="summary"> This is unnecessary content </figure> </div> I'm trying to retrieve "This is the important content" within the .news class but ...

javascriptjqueryhtmlcssphantomjs

What is the best way to position elements of varying heights at both the top and bottom within table cells?

I am currently developing a website on Drupal that showcases various rural products and services from multiple vendors. The main page features these items displayed in a grid format, each within a 'product card' containing vendor details, address ...

htmlcssdrupallayoutalignment

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

Within a ListView, I have dynamically generated ImageButtons. If an image does not have a link, I want to make it disabled. In the ItemDataBound event, I attempted the following approach: img.Enabled = False img.DescriptionUrl = "javascript:void(0);" img. ...

htmlasp.netcsscursorimagebutton