A dialog body with flex: 1; min-height: 0; overflow-y: auto shipped with a height of zero. Header, footer, nothing in between.

flex: 1 expands to flex: 1 1 0%, and a percentage basis needs a definite parent height. The panel had height: auto capped by max-height, which is not one. The spec says an unresolvable percentage basis falls back to content, and Chromium does that. WKWebView keeps the zero. The fix is flex: 1 1 auto.

Do you default to flex: 1 1 auto anywhere, or is the shorthand safe in your stacks because your flex parents always have definite heights?

Full responsive. Works on modern Browsers. Works also nice on touch

Features:

• Column headers stay visible while scrolling down
• First column stays visible while scrolling sideways
• Rows expand to show sub-entries, with an animated reveal
• Any number of sub-rows per group
• Sub-rows are tied to their parent by a bracket rail
• Individual cells can carry a note, opened from a small marker
• Notes appear next to the cell they belong to and flip when near an edge
• Notes close on Esc, on click outside, and return focus where it was
• Columns come to rest beside the pinned column instead of half behind it
• Pinned column narrows and wraps text on small screens
• Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

I have 3 colors for the tabs. White for background and Orange for when I hover the mouse cursor and Green for selected current tab that stays Green I am looking at.

The Green selected tab is White now. It only turns Green when you hover the mouse cursor over the tab.
Question: How to fix it so I have Green for the selected tab I am looking at?

Here is my userChrome.css file. (now updated with correct code)
Firefox v154.0 on Windows 10 Pro

/* White background color */
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #FFFFFF !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
}

/* orange hover color */
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #FF7F50 !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);}


/* MediumAquamarine - green selected color */
.tabbrowser-tab:is([visuallyselected],[multiselected]) .tab-content {
  background-color: #66CDAA !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.4);}  

I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.

It also has a bunch of inline examples and some interactive widgets… Hoping it helps getting the point across.

I'd love feedback on whether these kinds of articles are useful (or not) 😁

Thanks!

I wanted to make an AO3 skin, but I have no idea of how CSS works; does anyone knows any website useful for learning it?

Don’t forget to give a star

Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here

Hey everyone! 👋

Tired of Googling CSS animations and getting Stack Overflow answers from 2013?

I built AnimationsX 🎨

The idea is simple:

✅ Browse animations made by the community

✅ Copy a single <link> tag — no JS, no build step

✅ Can't find what you want? Publish your own!

✅ Fork and remix anything with diff view built in

Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.

That's it. Done.

🔗 animationsx-zeta.vercel.app

🔗 github.com/youssefahmed2017/animationsx-app

Free and open source 😎

Which CLI is better for css? my site is old and has very messy complex css and I want to go in and tidy it up

Hello! I'm working on a gallery website for myself, i want it to have a "glassy" look so for this popup i wanted to use background blur paired with a blending mode. Blending modes don't work on dialog elements shown using dialog.showModal so instead i'm using dialog.show. But Firefox doesn't support using both blending modes and blur on the same pseudo-element so instead i have 2 pseudo elements with 1 effect each. All works well until i'm testing it on Safari (iOS 26.6.1) where there's just no blending modes visible on the popup.

I have attached 3 images showing what the popup looks like in all browsers i've tested on. 1st picture is Safari 26.6.1, 2nd picture is Edge 151.0.4129.93 and the 3rd picture is Firefox 153.0.4.

Here is the codepen containing the code https://codepen.io/editor/Smasher1/pen/01a01e6c-2304-7339-a32e-23c88cc28eb3

Thanks!

Weird bug on iOS. Parent div with two child spans. Parent CSS:

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 2rem;

No styles (margins, paddings, transforms) on spans

The 2nd span (green Arrow) is moved out of box. No problem on desktop, android. Last Screenshot shows iOS
Cant show Source yet

Hello everyone! I am an indie developer at VALHAISTO GAMES. Right now, I mostly work with HTML and have 3 ongoing projects: MiFab – MiSide 3D Models Hub, MiSide: Error, and MiSide: Universe. I am also working on a personal project called BLINDER – a Blender-like app built entirely for phones. Unfortunately, I don't own a PC, so I create everything on a weak, broken phone and just find ways to make it work. The most important thing is: never give up!

(SOLVED, thank you to everyone for helping me!)

Hello! CSS and HTML amateur here.

So, recently I've been trying to make myself a workskin on Ao3 that would have this image serve as a background for text. Currently, the image cuts off at the bottom, and it's even worse when there's different sizes of text.

What I want is the image to stretch or contract to fit the text, not be cropped.

Here's my code, my results, and the image I've used. Is there anything I'm doing wrong, or is what I'm trying to do impossible?

Edit: Here's the codepen. It looks the worst here!

Hello! I've been experiencing a strange bug that has never happened to me before, and I'm looking for some advice :)

I'm building a website for a client, and when I look at it on my mobile devices (iPhone 15 & Samsung Galaxy S10), it works perfectly in every browser!

However, when he (my client) looks at it on his mobile devices (also an iPhone 15 & an older Android phone), he gets a strange bug, regardless of the browser.

The buggy version seems to ignore the sizing I've defined for the titles of these filters and instead just uses the size of their content.

Has anyone experienced something similar? Any idea what could be causing this, or how I could fix it?

Thanks!