It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/

I am attempting to adjust the left navigation menu on the screen.

  <main class="flex flex-grow w-full h-screen">
  <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm:block">
    <div class="flex flex-grow flex-col justify-between h-full p-4 bg-gray-800">
        <div class="text-sm">
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Backlog</div>
          <div class="bg-gray-700 text-blue-300 p-2 rounded mt-2 cursor-pointer">Board</div>
          <div class="bg-gray-900 flex justify-between items-center text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">
            <span>Reports</span>
            <span class="w-4 h-4 bg-blue-600 rounded-full text-white text-center font-normal text-xs">5</span>
          </div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Releases</div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Components</div>
          <div class="bg-gray-900 text-white p-2 rounded mt-2 cursor-pointer hover:bg-gray-700 hover:text-blue-300">Repository</div>
        </div>

        <div class="flex p-3 text-white bg-red-500 rounded cursor-pointer text-center text-sm">
          <button class="rounded inline-flex items-center">
            <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" /></svg>
            <span class="font-semibold">Logout</span>
          </button>
        </div>
    </div>
  </aside>

  <section class="w-full p-4">
    <div class="w-full h-64 border-dashed border-4 p-4 text-md">Dashboard</div>
    </section>

  </main>

I have experimented with various attributes such as grow, full, and flex-grow but still facing issues. Can anyone provide some assistance?

htmlcsstailwind-css

Answer №1

Eliminate the h-screen class from the <aside> tag

and instead, include this code before the main element:

<main class="flex flex-grow w-full" style="height: calc(100vh - 64px);">

This method may not be in line with Tailwind CSS standards, but it effectively sets the height of the element to the maximum screen height while subtracting the header height. You may also incorporate this into your own custom css or media queries.

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

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

javascriptcss

Is there a way to position a ListItem (using React) in the lower left corner in this specific case?

import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/Ap ...

cssreactjsmaterial-ui

Enclosing two smaller boxes within a larger box

I'm attempting to replicate the layout shown in the desired.png file (specifically with an outer box surrounding two inner boxes). Currently, my code doesn't display the expected outer box around the two inner boxes. How can I modify it to achie ...

htmlcss

Is there a way to make JavaScript function properly with PHP-generated content?

I have a PHP file that loads a variety of forms depending on an identifier passed through a GET request. Everything is functioning properly, except for my JavaScript/jQuery code. Is there a way I can refresh the JavaScript to make it work with the form? ...

javascriptphpjqueryhtml

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

javascripthtmlcss

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

javascripthtmlreactjsnext.js

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular

Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...

htmlcssangulartypescript

Tips for positioning a div next to an input box when it is in focus

I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it. This is the CSS code I am using: .clrble .fr ...

javascriptangularjscss

Manipulating Div Content with JQuery Based on Checkbox Selections

My goal is to extract content from a hidden div that contains an unordered list with specific classes and move certain list elements into placeholder divs based on checkbox values. Initially, when no checkboxes are checked, I want all list elements in the ...

jquerycsscheckbox

Dynamic card resizing to fit changes in window size

Hey, I'm currently working on a card layout and have hit a roadblock. I'd like the images to shrink as the window size decreases proportionally. Goal: Images should decrease in size until 600px width while staying centered up to that point. I& ...

htmlcss

What is the best way to increment the value of an input by any number using JavaScript and HTML?

My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...

javascripthtml

Conceal elements with a single click of a button

How can I use jQuery to hide all li elements with an aria-label containing the word COMPANY when the Search from documents button is clicked? Here is the HTML code: <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" t ...

javascriptjqueryhtmlevent-handling

How come the hover effect is not functioning properly following the addition of padding to

I have set a padding top of 120px, but for some reason the hover effect is not working properly. Can anyone help me troubleshoot this issue? Here is the code snippet: 'use client'; // eslint-disable-next-line no-unused-vars import React, { useSta ...

reactjsnext.jstailwind-css

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Is there a way in jQuery to make all browsers act as if they have CSS3 capabilities? ...

javascriptjquerycss

Why are the radio buttons not aligned with the text in the center?

Currently, I am in the process of building a form that includes radio buttons. However, I've encountered an issue where the text next to the radio buttons appears on a different level than the buttons themselves. How can I go about fixing this partic ...

javascripthtmlcss

Enhance Material UI BottomNavigationAction by adding a pseudo-element

Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...

cssreactjsmaterial-uipseudo-element

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

Include a return or delete from the default IO statement

I am utilizing an intersection observer that alters the header's font-color and background-color based on the content intersecting with it. This change is determined by the presence of data-color and data-background attributes declared on the div/sect ...

javascripthtmlcssintersection-observer

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

When animating text using CSS keyframes, I use animation-fill-mode: forwards to maintain the final look of the animation. For example: #my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mod ...

javascriptjquerycss