What is the expected behavior of the overflow-x and overflow-y properties?

All major browsers should have good support for the CSS properties overflow-x and overflow-y, according to w3. However, I observed some poor behavior when using the visible value in an example.

You can view the code example on GitHub or see a live demonstration here.

I am trying to avoid the irregular behavior that occurs with the visible value. Ideally, I want vertical scrolling (auto or scroll) and horizontally overflowing content to be visible. I tested this on Chrome and Firefox.

How can I address this issue, and is it supposed to behave this way?

csscross-browserfrontend

Answer №1

It is standard behavior, as outlined in the W3 specification.

In cases where a combination of visible and hidden overflow is not feasible, the visible overflow is automatically adjusted to "auto."

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

Using Bootstrap to create a fixed footer on a webpage

Is there a substitute for navbar-static-bottom? I currently have my footer set up like this: <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">&a ...

htmlcsstwitter-bootstrap

Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} ...

cssreactjsmaterial-uidatepickercalendar

SVG - Implementing background color filters on paths

I am attempting to replicate the CSS styling I have already implemented for a class on an SVG element. In CSS, the fill property inherits the current color of the parent element, let's say it's red for argument's sake. Next, I add several ...

htmlcsssvgsvg-filters

Hold off on scrolling up while hovering over the screen

I've been attempting to implement a scroll-up behavior in WordPress, but I'm facing difficulties in pausing the animation when hovering over it. I've experimented with both jQuery and CSS methods, but have not been successful so far. Any ass ...

htmljquerycsswordpress

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css

Opera and Internet Explorer have trouble properly applying css text-decoration

It appears that the CSS text-decoration style is not being correctly displayed in Opera 11 and IE 9, but works perfectly fine in Chrome, Firefox, and Safari. Can anyone offer a solution to fix this issue? Incorrect Rendering: Correct Rendering: Below is ...

htmlcssinternet-explorerlayoutopera

"Spice up your website with dynamic text colors using JQuery

REVISED I've been exploring various options and attempting to create a solution, but I'm struggling with it... Do you think it's feasible to achieve this? <button>Button</button> <div id='myDivId'> ...

jqueryhtmlcss

Creating a sleek appearance for Bootstrap input within the selectize.js component by mimicking the input-sm

I am currently working with a selectize component that appears like this: https://i.sstatic.net/z2aTw.png My objective is to adjust the appearance of the search input to make it smaller by changing its class from the standard bootstrap input to input-sm. ...

htmlcsstwitter-bootstrap

Storing data in the browser's local storage using jQuery without requiring any CSS

I have a form that receives data and I am trying to save the first two pages of received data into localStorage: <form id="myForm" method="post"> Font Size (px): <input id="fontsize" type="text" name="fontsize" /> </form> <s ...

javascriptjquerycsshtml

The image blur effect was unsuccessful in Safari, Opera, and Internet Explorer across different browsers

I'm having some trouble with this code : JavaScript: <script src="scripts/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("img").css({ "filter": "url(#example-one)", "-webk ...

jqueryinternet-explorersafaricross-browseropera

Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...

csshtmlproject

The Prism code block disrupts the fluidity of responsive design (which utilizes flexbox)

I created a design for a webpage that is fully responsive and adjusts smoothly to smaller screens. However, when I inserted a code block (and used prism.js to format it), the responsiveness of the layout was compromised. The code box and text content overf ...

cssflexboxresponsive-designviewportprismjs

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

htmlcssangularprimeng

Exploring the wilderness: Safari with a twist of negative margin

Dealing with two values, "price" and "old price". When displaying the "old price", I need to cross it out with a line that is thinner than the default text-decoration: line-through. Below is the code snippet: HTML: <span class="price"> <span c ...

htmlcsssafarimargintext-decorations

"div p" or "div * p"? Do they have the same meaning or is there a difference between them?

My knowledge of the "grandchild" selector in CSS was limited until I came across this insightful article. Intrigued, I decided to experiment with it and found that it resembles the universal selector (which targets all elements). Let's take a look at ...

htmlcsscss-selectors

Tips for customizing the appearance of dayMouseover in Fullcalendar

While working on my Angular application, I encountered an issue with the Fullcalendar plugin. Specifically, I want to dynamically change the cell color when hovering over a time slot in AgendaWeek view (e.g. 7.30am-8.00am). I am striving for something like ...

htmlcssangularjsfullcalendar

The left column is stationary vertically, but can be scrolled horizontally

On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...

htmlcsslayoutcss-position

Troubleshoot: Bootstrap Table Alignment Problem

I've been struggling to align my table header and content properly, as shown in the image. I want the header aligned to the right while keeping the rest of the content aligned to the left of the header. Is there a way to achieve this using only CSS wi ...

htmlcsstwitter-bootstraphtml-tablealignment

Trouble with Bootstrap Popover's visibility

My current setup involves a popover that is not initializing properly. The code I am using is shown below: HTML: <div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div> JavaScript: $(function () { $('[data-t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporate an onclick event to the elements within the array

I'm currently working on iterating over an array and adding an onclick event to each element. My goal is to be able to click on each div and have them log their values in the console. However, I am facing a challenge in applying the onclick event to e ...

javascripthtmlcss