The issue of overflowing scroll functionality appears to be malfunctioning

.main-content{
  height: 100%;
  width: 60%;
  min-height: 800px;
  background-color: white;
  border-radius: 5px;
  margin-left: 1%;
  border: solid 1px black;
}

.profile-banner{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7vw;
  margin-top: 7%;
  background-color: rgba(71, 135, 195, 0.5);
}

.profile-avatar{
  width: 18%;
  margin-right: 3%;
  img{
    width: 100%;
    border: solid white 2px;
  }
}

.profile-username{
  margin-left: 5%;
  font-size: 4vw;
  color: $font-blue;
  font-family: 'Titillium Web', sans-serif;
  -webkit-text-stroke: 1px white;
}

.profile-second-sec{
  margin-top: 8%;
  height: 20vw;
  background-color: blue;
}

.profile-third-sec{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8%;
  height: 30vw;
  background-color: grey;
  overflow-x: scroll;
  white-space: nowrap

}

.profile-image-container{
  display: flex;
  align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
  <i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
  <div class="profile-username">
    User profile 
  </div>
  <div class="profile-avatar">
   Avatar image
  </div>
</div>

<div class="profile-second-sec">

</div>

<div class="profile-third-sec">
  >> This is where the images go <<
</div>
</div>

EDIT: included code snippet for reference

I am attempting to create a horizontal scrolling div, but when I add content images, they get resized and squeezed inside the container like this:

https://i.sstatic.net/UC4Dm.png

The images are being resized to fit within the container, but I want them to be displayed at their original size with the ability to scroll horizontally.

I tried adding "overflow: scroll" but it didn't work as expected.

  .profile-third-sec{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 8%;
    height: 30vw;
    background-color: $font-grey;
    overflow-x: scroll;

  }

  .profile-image-container{
    display: flex;
    align-items: center;
  }

I thought I understood how to achieve this, but clearly I need some help! Any suggestions would be appreciated.

Thank you

css

Answer №1

To enhance the image display, you can eliminate the flexbox rules and apply specific properties to the image. Utilizing white-space and overflow attributes should help achieve the desired result.

For instance:

.main-content {
  height: 100%;
  width: 60%;
  min-height: 800px;
  background-color: white;
  border-radius: 5px;
  margin-left: 1%;
  border: solid 1px black;
}

.profile-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7vw;
  margin-top: 7%;
  background-color: rgba(71, 135, 195, 0.5);
}

.profile-avatar {
  width: 18%;
  margin-right: 3%;
  img {
    width: 100%;
    border: solid white 2px;
  }
}

.profile-username {
  margin-left: 5%;
  font-size: 4vw;
  color: $font-blue;
  font-family: 'Titillium Web', sans-serif;
  -webkit-text-stroke: 1px white;
}

.profile-second-sec {
  margin-top: 8%;
  height: 20vw;
  background-color: blue;
}

.profile-third-sec {
  margin-top: 8%;
  height: 30vw;
  background-color: grey;
  overflow-x: scroll;
  white-space: nowrap
}

.prgile-third-sec img {
  display: block;
  width: 100%;
  height: auto;
}

.profile-image-container {
  display: flex;
  align-items: center;
}
<div class="main-content">
  <div class="tab-header font-large">
    <i class="fa fa-user"></i> User profile
  </div>
  <div class="profile-banner flerowspb">
    <div class="profile-username">
      User profile
    </div>
    <div class="profile-avatar">
      Avatar image
    </div>
  </div>

  <div class="profile-second-sec">

  </div>

  <div class="profile-third-sec">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300"></div>
  </div>

Answer №2

When using Flex, the default wrap property can be very helpful. You can experiment with it in your code by applying the following stylesheet.

.classOne {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
 -webkit-overflow-scrolling: touch;
 -ms-overflow-style: -ms-autohiding-scrollbar;
}

.classTwo {
  display: flex;
  flex-wrap: nowrap;
}

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

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

I'm facing an issue with a DIV that is 600px wide and contains a table. Due to long email addresses, the wrapping isn't working properly even after using word-wrap: break-word. I've experimented with changing the width, adding !important, a ...

csshtml-tableoverflow

What is the best way to place a header in a specific location on a

As I continue working on my project, I am facing a challenge in positioning the headings in specific places. My ultimate goal is to achieve a look similar to Figure 1 for my headings. [Figure 1][1] However, as of now, my layout resembles Figure 2. I find ...

csshtmlheadernavbar

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

htmlcssogg

How about this: "Leveraging the power of #IEroot to achieve a

Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...

cssinternet-explorer

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

Removing extra spaces from a hyperlink using CSS

Can CSS be used to remove extra whitespaces? Within the code snippet provided, there is an additional whitespace in the <a> tag. This link is generated by a WordPress plugin and I prefer not to make changes directly to the source files of the plugin. ...

css

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

htmlcsswordpress

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

javascripthtmlcss

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

What is the best way to position this grid container directly beneath the search box using absolute positioning?

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique Starter</title> ...

htmlcss

I Am unable to locate the '...' after applying the text-ellipsis style to a div

https://i.stack.imgur.com/Tsmf5.png The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div. Take a look at my code: import Image from "next/future/image"; import Link from ...

javascriptcssnext.jstailwind-css

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

javascriptjqueryhtmlcssdatatable

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

I experimented with using jQuery on a webpage that has already been modified by jQuery in order to add custom CSS code: jQuery('head').append('<style type=\"text/css\">body { background: #000; }</style>'); When I ...

javajavascriptcssselenium-webdriver

What is the method for activating scrolling in an inner div instead of the browser window?

In the code snippet provided, I am encountering an issue where the browser window scrolls instead of the specified div with overflow-y: scroll when minimizing the browser window. How can I ensure that scrolling occurs within the div itself without making ...

css

Exploring Rails 6: Enhancing Web Design with CSS Image Display

I've been attempting to update my webpage background with an image through CSS, but I'm struggling to reference one of my Rails 6 images in the process. Despite trying options like asset-url and image-url, I haven't been successful. However, ...

cssruby-on-railssass

Using Multiple SCSS Files to Reference a Centralized Style Sheet

I am currently developing a React application and facing an issue with my SCSS files. I have three SCSS files, one main file that contains theme variable colors, and the other two are located in component folders. When I import the main SCSS file into the ...

cssreactjssass

Adjusting the 'Division' Style in HTML

Currently, I am utilizing the incredible StackEdit for my documents. One of its awesome features is the ability to export an HTML file of the document. This document utilizes The default CSS File. As an example, here is the code from the downloaded HT ...

htmlcssstackedit

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

javascriptcsstypescriptd3.jsbar-chart

Alter the td styling depending on the value using AngularJS

I need to dynamically change the style of each td in a column based on its value. There are five different statuses, so each status should have a unique border-color and font-color assigned to it. How can I achieve this using Angular script without hard-co ...

cssangularjshtml-table

Troubleshooting the Issue: Iscroll.js Child Element Overflow Scroll Problem on iOS Devices

In my current project, I'm utilizing Iscroll.js to create a design where all elements must adjust to the height of the screen with a significant horizontal scroll. However, I've encountered an issue with certain elements overflowing vertically ba ...

ioscssoverflowiscroll