In a grid container, a child element utilizing `overflow-y: auto` will not be able to scroll

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto,1fr]">
  <div class="bg-slate-300 h-24 flex items-center px-4">
    <h1 class="text-3xl">Navbar</h1>
  </div>
  <div class="p-4 gap-2 grid grid-rows-[auto,1fr]">
    <h1 class="text-3xl">Title</h1>
    <div class="gap-4 grid grid-rows-[auto,1fr]">
      <div class="flex">
        <button class="btn border rounded p-2">Button</button>
      </div>
      <div class="overflow-y-auto flex flex-col gap-2">
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
        <div class="h-[200px] bg-slate-100"></div>
      </div>
    </div>
  </div>
</div>

The div with class overflow-y-auto should be scrollable, but it's not behaving as expected. Setting a fixed height for the div will make it scrollable, but I want it to take up the remaining space within its parent container.

csstailwind-css

Answer №1

By default, grid children do not have the "shrink" property. You will need to explicitly use minmax(0,1fr). This can become complicated when dealing with nested grids, so it's best to use it only where necessary. After setting this for the grid children, you also need to ensure that your flex children do not shrink, allowing them to overflow and scroll.

To see the result, you may need to run the code and click on the "full page" button.

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto,minmax(0,1fr)]">
  <div class="bg-slate-300 h-24 flex items-center px-4">
    <h1 class="text-3xl">Navbar</h1>
  </div>
  <div class="p-4 gap-2 grid grid-rows-[auto,minmax(0,1fr)]">
    <h1 class="text-3xl">Title</h1>
    <div class="gap-4 grid grid-rows-[auto,1fr]">
      <div class="flex">
        <button class="btn border rounded p-2">Button</button>
      </div>
      <div class="overflow-y-auto flex flex-col gap-2">
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
        <div class="shrink-0 h-[200px] bg-slate-100"></div>
      </div>
    </div>
  </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

Why isn't my CSS transition animation working? Any suggestions on how to troubleshoot and resolve

I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...

javascripthtmlcsssass

Click to alter the style of an <li> element

I'm currently using Angular CLI and I have a menu list that I want to customize. Specifically, I want to change the background color of the <li> element when it is clicked. I am passing an id to the changeColor() function, but unfortunately, I a ...

htmlcssangulartypescript

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Exploring the jungle. Cursor acting strange while dragging

I am currently working on implementing drag-and-drop functionality in my project, utilizing slip.js from slip.js. To enhance the cursor during dragging, I have assigned class="draggable" to each draggable <tr>. The CSS code for this class is: .drag ...

csssafaridrag-and-dropcross-browsercursor

Implement horizontal scrolling feature to code container

One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...

cssscrollblogger

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

There seems to be an issue with the functionality of the Bootstrap Modal

I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: https://i.sstatic.net/UIU2w.png The red box in the image indicates whe ...

javascripthtmlcssbootstrap-4

In order to activate the VScode Tailwind CSS Intellisense plugin, I have discovered that I need to insert a space before

I recently followed the installation guide for using Tailwind with Next.js Here is a snippet from my tailwind.config.js file: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ...

cssreactjsvisual-studio-codenext.jstailwind-css

Preventing Repetition in an HTML List using JavaScript

My HTML list is populated with values from JSON, and I have a button on the page. <button onclick="printJsonList()">CLICK</button> This button triggers the following JavaScript function: function printJsonList(){ console.log(ctNameKeep); ...

javascriptjqueryhtmlcssajax

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

htmlcssformsfocus

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

The process of toggling a div to slide up and down explained

I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons. JavaScript: $(function () { // DOM ready shorthand var $content = $(".sliderText"); var $contentdiv = $(".sliderCo ...

jqueryhtmlcss

Placement of text is incorrect on certain react cards

I have an application that retrieves videos and generates a card for each video, displaying the video title, creator, link, download option, views, and upload date on each card. Fetching and displaying these elements works well, for the most part. However ...

htmlcsstwitter-bootstrap

Adjust the background color of children based on the parent's mouseover event

Seeking a solution to fill three bars with varying percentages: <div class="bars" style="width:0%; background-color: red;"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </ ...

javascriptcss

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Is it possible to change the style of a div that doesn't have an id or class assigned to it? I need some assistance with this. Here is the div that needs styling: <div style="display:inline-block"> I would like the end result to look somethin ...

javascriptjqueryhtmlcss

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

Error encountered during Nuxt build: Syntax error on Line 1 of the SCSS component file

I'm currently working on a project in node 18.7.0 that utilizes nuxt 2.15.8. Within my Vue component, I have the following SCSS code: <style lang="scss"> .Accordion { --Accordion__margin-top: 2.5rem; &__items { margin ...

cssvue.jssassnuxt.jsscss-lint

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

cssanimation3dtransition

Steps to display an angled bracket to indicate a line break

I have a div that is editable, allowing me to display the entered text. To indicate each new line, I would like to show a ">" symbol at the beginning of the line. HTML <body> <div> <span> &gt; </span> ...

jquerycsshtml