Despite setting the overflow-y property, the website continues to scroll

Take a look at the code snippet in this Fiddle example.

Despite setting overflow-y on the DIV of the orange area, the entire website still scrolls. When the list inside the orange area is shorter, it functions correctly with only a scrollbar appearing on the right side. However, as the inner content grows, the website begins to scroll uncontrollably. How do I prevent this behavior so that only the orange area scrolls regardless of its length?

Currently working with Bootstrap 4.

...please provide code along with links to fiddles...
cssbootstrap-4

Answer №1

Hopefully I have grasped your query correctly. Here's a solution incorporating bootstrap:

<div class="row">
    <div class="col ">
      <div class="d-flex flex-column bd-highlight mb-3">
        <div class="p-2 flex-even bd-highlight bg-primary" >Heading</div>
        <div class="p-2 flex-even bd-highlight bg-warning yellow">


        
        </div>
        <div class="p-2 flex-even bd-highlight bg-secondary">Flex item 3</div>
      </div>
    </div>
    <div class="col bg-success Context">Context</div>
  </div>

CSS Styling:

.row{
   height: 100vh;
   padding: 0;
   margin: 0;
 }
 .row >div{
   padding: 0;
   margin: 0;
 }
 .Context{
   height: 100%;
   overflow-y: scroll;
 }

 .flex-even {
  height: 32.5vh;
}
.yellow{
  overflow-y: scroll;
}

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

Erase blob_over from the Wordpress menu hover effect

I've created a unique style for the Donate button on this website, but I'm struggling to remove the hover effect. Any suggestions on where to start? Website URL: This is my Custom Class CSS: .donate { background:#4A1383; padding:0px 10px 0px 1 ...

css

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Can someone guide me on creating a real-time JavaScript count-up feature that doesn't reset when the page reloads? Any tips or examples similar to would be much appreciated. Thank you! ...

javascripthtmlcss

Switch Button in HTML

I am trying to implement a toggle button on my website, but unfortunately it is not working properly. Here is the HTML code I am using: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" media="screen"> <script typ ...

jqueryhtmlcss

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...

htmlresponsive-designbootstrap-4

Create a collapsible menu using only CSS that expands when the down arrow is clicked, specifically designed for

I am currently working on creating a mobile-friendly version of a menu. I have a list of items, and I want only the item with the class nav-current to be displayed initially. Using pseudo :after, I added an arrow after the link of that specific li element. ...

csssass

Leverage JQuery's Range Slider for Real-Time CSS Value Updates

Trying to dynamically update CSS properties such as minmax(20vw), grid-gap, and height using individual range sliders: #wrapper { grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); grid-gap: 20px; } #item { height: 150px; } Utilizing CSS grid a ...

javascriptjqueryhtmlcssrangeslider

Embed hyperlinks in a haml layout

I created a custom template called "_list_two_lines" %ul{:style=>"padding-top: 0; margin-top: 0"} - content.each do |element| %li{:style=>"font-family: Roboto, sans-serif; color: #333;font-weight: 300; font-size: 14px; "} &#10003; ...

htmlcsshaml

Creating a resilient CSS: DOM for seamless printing in PDF or on physical printers

I need help with formatting a list of col-6 elements (bootstrap) inside a row element so that the content of each block remains intact in a pdf preview generated using print(). I attempted to use various css properties like page-break and break as suggeste ...

htmlcsspdfbootstrap-5

Creating a Navigation Bar using the Flexbox property

As a beginner, I attempted to create a navbar using flex but did not achieve the desired outcome. My goal is to have: Logo Home About Services Contact * { margin: 0; padding: 0; font-family: ...

htmlcssflexbox

Issues with displaying PNG background images in older versions of IE while using HTML5?

Below is the HTML code that I am working with: <section class="first-content-top"> <img src="images/img-diner.png" /> <h1>Menu</h1> </section> <section class="first-content-middle"> <article class="m ...

csshtmlinternet-explorerinternet-explorer-8

What is the best way to manage horizontal scrolling using buttons?

I was hoping that when the button is clicked, the scroll would move in the direction of the click while holding down the button. Initially, it worked flawlessly, but suddenly it stopped functioning. export default function initCarousel() { const carous ...

javascripthtmlcss

Is it not possible to import in SCSS if the variable is equal to the value?

In my project, I am utilizing scss. There is a variable that determines which scss file needs to be imported based on its value. I attempted the following approach: $test: 1; @if $test == 1 { @import "./theme1.scss"; } However, an error message is dis ...

cssangularsass

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Having trouble using jQuery to target the element "(this)"?

Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...

jqueryhtmlcsshover

Creating a sticky footer with an additional element using CSS

As I work on building my own website for showcasing my art portfolio, I came across a helpful resource at . However, I am facing some challenges when trying to incorporate an additional element into it. The current HTML structure looks like this: <htm ...

htmlcssfootersticky-footer

Using Bootstrap 3's hidden-xs class can help slim down the width of

I am currently testing out the Bootstrap 3 responsive grids and attempting to hide a column from a row when the screen size is small. However, I find that when the column disappears, the entire row seems to shrink in width. Here's the code causing me ...

htmlcsstwitter-bootstrap-3

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...

jquerycssimage-resizingfluid-layoutfluid

In HTML, employing the float:left property and using relative positioning are essential

I've encountered a strange issue when using a div block with float:left and another with relative position. The second block is behaving unexpectedly, as the text is extending beyond the box and its background color. Can anyone help me understand what ...

htmlcss

Issues with Adaptive Headers

* { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { font-size: 14px; } header { width: 100vw; height: 50px; background-color: #222; margin: 0 auto; padding: 0; display: flex; justify-content: ...

htmlcssflexbox

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

cssangularjsangularjs-directive