Achieve vertical scrolling within a div of a set width employing CSS

My situation involves a fixed size div that is 500px in dimensions. Inside this div, there is a smaller div. However, as the number of divs increases, it starts to display a horizontal scroll. I am aiming for a vertical scroll instead. I attempted to resolve this by using the following CSS:

width: 1509px;
overflow-x: hidden;
overflow-y: scroll;

Unfortunately, this solution did not work as expected. Any suggestions or guidance on how to achieve the desired outcome would be greatly appreciated!

Thank you in advance!

htmlcssuser-interfacewebvertical-scrolling

Answer №1

The error has been identified:

display: flex;
flex-wrap: wrap;
height: 265px;
margin-bottom: 12px;
overflow-y: scroll;

I overlooked setting flex-wrap.

Answer №2

Is this what you had in mind?

.container, .item {
  display: inline-block;
  box-sizing: border-box;
}

.container {
  width: 200px;
  border: 1px solid #ddd;
}

.item {
  width: 50px;
  text-align: center;
  padding: 5px;
}
<div class='container'>
  <span class='item'>1</span>
  <span class='item'>2</span>
  <span class='item'>3</span>
  <span class='item'>4</span>
  <span class='item'>5</span>
  <span class='item'>6</span>
  <span class='item'>7</span>
<div>

Answer №3

Take a look at this example for some guidance.

.container {
    width: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.content {
    width: 500px;
}
<div class="container">
<div class="content">
This is the content that requires bottom scrolling. This content needs to be scrolled to view the complete text.
</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

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

I've been trying to place different textures on the top and bottom sides using Threejs to display unique images on each side. However, I'm encountering an issue where the same image is being displayed on both the top and bottom sides. Below is th ...

javascripthtmlthree.jsimage-rendering

Troubleshooting the Missing Border Issue in Tailwind Form Fieldset [Code Snippet Included]

I am developing a basic react application with the help of Tailwind css. Scenario 1: Functioning correctly without tailwind: https://codesandbox.io/s/bold-agnesi-y70ue In this example, the tailwind library is not utilized. The simple react app displays ...

htmlcssreactjstailwind-cssfieldset

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

Could someone help me figure out how to implement HTML, CSS, and JavaScript design in Visual Studio 2022 while utilizing ASP.NET controls for coding purposes? I am encountering difficulties in starting my work on a website project. Any assistance would be ...

htmlcssasp.netbootstrap-5visual-studio-2022

Enhancing CSS with Additional Properties

As a web developer, I recently had the opportunity to explore the new LOGIN PAGE preview of GMAIL and was very impressed with the Sign In button's UI. After examining the Page's CSS, I discovered some interesting properties, such as: **backgroun ...

csswebkit

No data being fetched through Ajax

I am facing an issue with retrieving PHP data in the form of an array. I have created an AJAX query to display data in two divs: one is a drop-down and the second is where all data will be shown. However, the problem is that when I attempt to do this, all ...

javascriptphpjqueryhtmlajax

Align Text with Icon Using FontAwesome

Hey, I'm having a bit of trouble with something simple and it's driving me crazy. All I want to do is center the text vertically next to a FontAwesome icon. However, no matter what I try, I just can't seem to get it to work. I've looke ...

htmlcssfont-awesomevertical-alignment

How can I prevent scrolling while a loader is displayed during page loading?

How can I disable scrollability on my personal website when the page is loading with the loader wrapper? I have tried using overflow: hidden; in the CSS but it didn't work. The loader is set to display for 2.5 seconds. Any suggestions on how to achiev ...

javajquerycssloader

Issues with IE 11: SVG Map Not Triggering Mouseenter or Mouseleave Events

I've been grappling with this issue for the past couple of days and despite trying numerous solutions, nothing seems to be working. My SVG map of the US has jQuery mouseenter and mouseleave events that function properly in browsers other than IE 11 ( ...

javascriptjquerycssinternet-explorersvg

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

csswebpackvue.jsnode-modulesvue-cli

Assigning a value to an input field using jQuery

I'm facing an issue while trying to set the value for an input using jQuery. Essentially, when you click on a link, it redirects you to a different page with a form, and I am attempting to set the value of one of the inputs in that form. Unfortunately ...

javascriptjqueryhtml

I am looking to navigate between tabs on a multi-part form in order to submit all the form data

My current form consists of five questions, each on a separate tab. What I am trying to achieve is the following: When the user submits the form data on the fifth tab An Ajax request sends the form data to a background script for processing Simultaneousl ...

phpjqueryhtmlajaxtwitter-bootstrap

Selenium: Mastering the Art of Label Clicking

I'm attempting to interact with this element using Python's Selenium library by employing the following code snippet: driver.find_element_by_('publicForm_customFields').click() Unfortunately, I encountered the following error message: ...

pythonhtmlselenium

Click the "Add to Cart" button to make a purchase

Recently, I've been working on modeling an add to cart feature using jQuery. However, I have encountered a small issue that I'm trying to troubleshoot. When I click the mybtn button, the model displays and functions correctly, but there seems to ...

javascripthtmljquerycssmode

Transferring the value stored in the value attribute to a different PHP page?

I am attempting to pass the value from the value attribute in button using a form with the method POST to "landlord_home.php". However, when I click on the button to navigate to the next page "edit_post.php", it triggers the PHP validation code on that pag ...

phphtmlmysql

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

c#htmlasp.net-core

Guidance on incorporating static files with Spring MVC and Thymeleaf

I'm seeking guidance on how to properly incorporate static files such as CSS and images in my Spring MVC application using Thymeleaf. Despite researching extensively on this topic, I have not found a solution that works for me. Based on the recommenda ...

javacssspringspring-mvcthymeleaf

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

Video background is malfunctioning on Firefox and Internet Explorer

Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...

jqueryhtmlweb

Adapting a CSS design

Having some trouble with creating a CSS style. Here's what I have so far: http://jsfiddle.net/WhNRK/26/ Originally designed for a label, but now attempting to modify it for something like this: <input type='radio' name='mcq' ...

htmlcss