Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presence of the nested div is optional. The following code includes HTML and corresponding CSS:

.HumCategoriesWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* width: 30%; */
  padding: 0 20px 0 20px;
  max-width: 1000px;
  margin: 0 auto;
  background: #1C1E2B;
  float: left;
  min-height: 100vh;
  position: fixed;
  right: 0;
  overflow: hidden;
}

.HomePageWrapper {
  width: 80vw;
  float: right;
}
<div className="HumCategoriesWrapper">
  <h2 style={{paddingTop: "40px", paddingBottom: "20px", width: "100%", color: "white"}}>Hum Categories</h2>
  <div contenteditable className="humCatCards">
    <HomeCard />
    <HomeCard />
    <HomeCard />
    <HomeCard />
    <HomeCard />
    <HomeCard />
    <HomeCard />
  </div>
</div>
</div>

htmlcssreactjs

Answer №1

To achieve this, you can utilize the max-height property in conjunction with overflow-y: auto.

.HumCategoriesWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* width: 30%; */
  padding: 0 20px 0 20px;
  max-width: 1000px;
  margin: 0 auto;
  background: #1C1E2B;
  float: left;
  min-height: 100vh;
  position: fixed;
  right: 0;
  overflow: hidden;
}

.HomePageWrapper {
  width: 80vw;
  float: right;
}

.humCatCards {
  max-height: 100px;
  overflow-y: auto;
  color: #fff;
}
<div class="HumCategoriesWrapper">
  <h2 style={{paddingTop: "40px", paddingBottom: "20px", width: "100%", color: "white"}}>Hum Categories</h2>
  <div contenteditable class="humCatCards">
    <p>
      HomeCard
    </p>
    <p>
      HomeCard
    </p>

    <p>
      HomeCard
    </p>

    <p>
      HomeCard
    </p>

    <p>
      HomeCard
    </p>


  </div>
</div>

View Working Fiddle Here

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 does my anchor appear with a different style compared to my submit button?

I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: Belo ...

htmlcss

Tips for styling a React JS component class

I am attempting to write inline CSS for a React JS component called Login, but I keep encountering an error. What could be causing this issue? Could you provide guidance on the correct way to implement in-line component CSS? import React, {Component} from ...

javascriptreactjs

The method for transforming all headers into permalinks with jquery/javascript

I am looking for a way to transform all headers on a page into clickable permalinks using jQuery or JavaScript. Here is the HTML code: $('h3').each(function() { var id = $(this).attr('id'); if (id) { //Check if the element has a ...

javascriptjqueryhtmlpermalinkshtml-heading

The navigation bar is displaying in the inspect element but is mysteriously invisible on the actual webpage

I am encountering an issue with my website while using react and tailwind. When I inspect the element, it shows that my Navbar is present but does not display visually. There are no errors except for a possible issue with Tailwind CSS. Here is the code sni ...

reactjstailwind-css

Generate selection choices by looping through a JSON document

I am attempting to develop a search box that will provide autocomplete suggestions based on user input from a key-value pair in a json file. I initially thought using datalist would be the most suitable approach for this task, however, upon running the cod ...

javascriptjqueryjsonhtml

The Google Closure Compiler Service is providing faulty code

I've been using Closure Compiler through to minify and obfuscate my JavaScript code, but I seem to be encountering an issue. To troubleshoot, I created a test page with a script. Here's the HTML5 code snippet: <!DOCTYPE html> <html> ...

javascriptjqueryhtmlgoogle-closure-compilervelocity.js

Horizontal scrolling alone is proving to be ineffective

My current HTML code includes a table that is integrated with PHP Laravel. The data is being pulled from Admin.php to populate the table, resulting in it being wider than the screen window. To address this, I added a horizontal scroll bar for navigation pu ...

javascriptphpjqueryhtmlcss

Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to alig ...

htmlcss

The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure: <li class="block1"> <a title="Block 1 Title" href="get/wzTZKKrI1kQ"> <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"> ...

htmlcssimage

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

javahtmlreactjsjsx

Is a server necessary for utilizing HTML5's WebSockets?

Do I need to write server code when implementing WebSockets? Specifically, does the JavaScript in my client application have to connect to a dedicated server, or can my current Apache server handle this functionality? ...

htmlwebsocket

How can I ensure that the HTML I retrieve with $http in Angular is displayed as actual HTML and not just plain text?

I've been struggling with this issue for quite some time. Essentially, I am using a $http.post method in Angular to send an email address and message to post.php. The post.php script then outputs text based on the result of the mail() function. Howev ...

javascriptphphtmlangularjs

Substitute the division

Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: More pages: 2 pag ...

javascripthtmljquerycss

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

javascripthtmlreactjsforms

Is there a way to make a single background image the frame for each individual post on a tumblr theme?

I've set my sights on a more challenging goal for my custom Tumblr themes - I want to have a background image for each post, similar to how other themes display posts within boxes. Is there a way to make these boxes into images? I've tried tinke ...

htmlcssthemestumblr

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

javascripthtml

The Javascript navigation bar is not displaying properly on mobile devices as it should

After customizing the responsive navbar tutorial from W3Schools using CSS and JS, I encountered an issue. I wanted to include a logo and a web page title before the navbar, which worked perfectly when the webpage was maximized. However, when I resized the ...

javascripthtmlcssresponsive-design

Exploring different approaches for testing within a ReactJS component?

I recently began exploring TDD and unit testing my JavaScript code, specifically by using Mocha and React shallow renderer to test my React components. The component I am currently testing looks like this: var React = require('react'); var test ...

reactjsmocha.js

Having trouble getting my Win and Lose Divs to display in my IF statement within the Card Game

Currently, I am developing a card game where players are presented with a card generated by the computer. The player has to decide whether the next card will be higher, lower, or equal to the current one by clicking corresponding buttons. if ((playerChoic ...

javascripthtmlif-statement

Clicking on a button in HTML to open a JavaScript file

As a beginner in HTML and JavaScript, I am looking for a way to open a JavaScript file when the onclick event of a button in my HTML file is triggered. Can anyone provide me with guidance on how to achieve this? Thank you in advance. ...

javascripthtmlonclickbuttonclick