When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

/* More CSS styling rules here */

button {
  margin: 2px;
  width: 500px;
}
<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      Content goes here
    </div>
    <div class="grid-item grid-nav">
      Navigation links
    </div>
    <div class="grid-item grid-content-left">
      Left content
    </div>
    <div class="grid-item grid-content-right">
      Right content
    </div>
    <div class="grid-item grid-footer">
      Footer content
    </div>
  </div>

  <div class="grid-container-2">
    Additional content
  </div>
</div>

I have applied some SCSS to style my page using grids. Please note the vertical scroll bars.

Image Link 1

Now, I wish to add another div on the right side of this table. When I do that and apply display:grid to the container, the scroll bars disappear because of a height issue.

Image Link 2

Please uncomment lines 9-11 in the SCSS provided below.

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;

What could be causing this issue?

javascripthtmlcsscss-grid

Answer №1

It is likely that this behavior is connected to the calculation result of the auto keyword within the implicitly-created grid row.

autoreference

The auto keyword behaves in a way that it takes up maximal content if applicable, and as a minimum size, it represents the largest minimum size (determined by min-width/min-height) of the grid items occupying the grid track.

For instance, setting the grid-auto-rows (or grid-template-rows) property to 100% will resolve the issue as shown below:

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}


.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100%;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

... [additional CSS code] ...

<button {
  margin: 2px;
  width: 500px;
}
<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    ... [additional HTML code] ...
  </div>

... [more HTML structure] ...
</div>

Answer №2

Converted SCSS to CSS.

The issue lies in the fact that the grid does not have a height constraint, causing it to expand as needed. If you remove overflow: hidden;, you will notice this behavior.

To fix this, simply add: grid-template-rows: 100%; This will make the grid adhere to the height of the containing div and prevent overflow.

.component-container {
  width: 800px;
  height: 200px;
  background-color: lightyellow;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  grid-gap: 10px;
}

.component-container .grid-container-1 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-gap: 3px;
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #2196F3;
}

.component-container .grid-container-1 .grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid darkblue;
  overflow: auto;
}

.component-container .grid-container-1 .grid-header {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.component-container .grid-container-1 .grid-nav {
  grid-column: 1;
  grid-row: 2 / span 1;
}

.component-container .grid-container-1 .grid-content-left {
  grid-column: 2;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-content-right {
  grid-column: 3;
  grid-row: 2;
}

.component-container .grid-container-1 .grid-footer {
  grid-column: 1 / span 3;
  grid-row: 3;
}

.component-container .grid-container-2 {
  padding: 3px;
  height: 100%;
  width: 100%;
  background-color: #b1f3cc;
}

button {
  margin: 2px;
  width: 500px;
}
<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button> One
      <br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

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

Sentry alert: Encountered a TypeError with the message "The function (0 , i.baggageHeaderToDynamicSamplingContext) does not

My website, which is built using Next.js and has Sentry attached to it, runs smoothly on localhost, dev, and staging environments. However, I am facing an issue when trying to run it on my main production server. The error message displayed is as follows: ...

javascriptnext.jsserver-side-renderingsentry

How can I remove HTML tags from a string using .NET?

Does anyone know of an efficient way to strip HTML tags from a string of HTML text? ...

c#.nethtmlregexparsing

Is there a way to allow users to edit all the input fields within the td elements when they click the edit button for a specific row?

I am completely new to web dev and I'm struggling with what should be a simple task. My goal is to enable editing of all inputs in a table row when the edit link is clicked. Since I am not using jQuery, I prefer a pure JavaScript solution if possible. ...

javascripthtmlnode.jsexpressejs

What is the process of exporting ES6 from main.js in Vue.js 2.0?

I've encountered an issue while using the webpack-simple-2.0 template for Vue.js (version 2.0.0-beta.5). When I include export const FOO='bar' in my main.js file, I'm unable to successfully import { FOO } in another .js file - it alway ...

javascriptecmascript-6webpackvue.js

Enhance your ChartJS visualizations by updating your charts with multiple datasets

Seeking a way to update both datasets in my chart without having to destroy and recreate it. chart2 = window.TrafficChart; chart2.data.labels = data.timestamps; console.log(data.traffic_tx); chart2.data.datasets[0] = data.traffic_rx; chart2.data.d ...

javascriptjsonchart.js

Locate all posts associated with the specified User ID

Using mongoose, I am able to populate the "Post Schema" with relevant information about users who create the posts. postModule.js const mongoose = require('mongoose'); const postSchema = mongoose.Schema({ title:String, description:String, date ...

javascriptnode.jsmongodbexpressmongoose

Creating a dynamic table in AngularJS that can add rows and columns with cyclic values

Seeking assistance for a programming challenge. I have created a form with 2 input fields for specifying the dimensions of a table (number of rows and columns), along with a button. When this button is clicked, the table should be dynamically populated wit ...

javascriptjqueryhtmlangularjs

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

javascripthtmlappframework

When executing a JavaScript program, an error with the message 'MODULE_NOT_FOUND' appeared, causing the internal module loader in Node to throw an error at line 1145

node:internal/modules/cjs/loader:1145 throw err; ^ Error: Module 'C:\Users\sande\3D Objects\JavaScript-Lesson\lesson08.js' not found at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15) at Mo ...

javascriptreactjsnode.js

Loop through unique IDs using AngularJS ng-repeat

I am just starting to delve into AngukarJS and ionic framework, embarking on the journey of creating an app with a structured tree layout as follows: Home Tab (list of books) (templates/allbooks.html) > unique book (book description and chapters) (tem ...

javascriptangularjsionic-framework

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

While transitioning an API from ES6 to TypeScript, a particular issue arises when attempting to run unit tests on the Express REST Endpoints: TypeError: Cannot read property 'address' of undefined The server code has been slightly adjusted for ...

javascriptnode.jstypescriptexpressmocha.js

What is the best way to update React State after making an asynchronous call to MongoDB?

I have been facing a common issue, but couldn't find an up-to-date solution on Stack Overflow specifically for React/Meteor. My goal is to query a mongoDB to retrieve data and then pass it into the state of my React components. Currently, I am queryin ...

javascriptmongodbreactjsasynchronous

Struggling to fix errors within a nested div element?

I'm currently utilizing AngularJS to perform basic form validation. Below is the current code snippet: <form name="myForm" id="form_id" method="post" novalidate> <div class="form-group"> <label for="myField_input" class="c ...

javascripthtmlangularjstwitter-bootstrap

The size of the dropdown adjusts according to the changes in the page size

Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...

htmlcssbootstrap-4

The element will only show up upon resizing (in Safari web browser)

I am facing a problem with a button styled using the class btn-getInfo-Ok <button class="btn-getInfo-Ok">Hello</button> in my style.css file .btn-getInfo-Ok { color:white !important; margin: 0 auto !important; height:50px; bottom:0; ...

javascriptjqueryhtmlcsssafari

Non-negotiable, non-deletable component of a text field

My goal is to create a textarea with a default value that cannot be removed by the user, but they should be able to add extra text after it. <textarea>This is constant</textarea> As shown above, the textarea has a default value. How can I ...

javascriptjqueryhtml

React Native not refreshing state data

I'm working with a FlatList that contains the code snippet below: <FlatList ........... refreshing={this.state.refresh} onRefresh={() => { this.setState({ ...

javascriptandroidreactjsreact-native

Remove a specific date entry from the database using VUE JS and Axios

I am encountering a challenge with Vuejs as I work on a To-Do list. The tasks need to be stored in a MySQL database, and I also want the ability to delete tasks. While I have succeeded in importing and creating data, I'm facing difficulty in deleting ...

javascriptsqlvue.jsaxiosform-data

A guide on dynamically showcasing/summoning icons in react by utilizing array data

QUESTION: 1 (SOLVED!) https://i.stack.imgur.com/1M1K7.png What is the best way to display icons based on an array of data codes? const data = [{ img: '01d' }, { img: '02d' }] if(data) { data.map((item) => ( <img src={`./ ...

javascriptreactjstypescriptnext.js

Tips on integrating JavaScript with embedded Ruby code

I am attempting to generate a flash message that displays after a user clicks a link in my js.erb file. $('a').click(function(){ <% flash.now[:alert]= "Successfully added "%> this.innerHTML <% "to cart" %> }) M ...

javascriptjqueryruby-on-railsrubyerb