skills.rest
hubeiqiao
hubeiqiaoCOMMUNITY
Explore all skills by this author →
Website𝕏@hubeiqiaoGitHub

modal-media-viewport-overflow

Apply viewport-relative sizing and flexbox properties to fix CSS overflow in fixed modals.

Updated Mar 4, 2026
Search Tags:#accessibility#css#modal#overflow#flexbox#viewport
One-click install
npx skills add https://github.com/hubeiqiao/skills --skill modal-media-viewport-overflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal-media-viewport-overflow
Source: https://github.com/hubeiqiao/skills/tree/main/modal-media-viewport-overflow
Command: npx skills add https://github.com/hubeiqiao/skills --skill modal-media-viewport-overflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill resolves the issue where content below large media elements (like videos or images) in fixed modals gets pushed off-screen and becomes inaccessible due to viewport overflow.

Core Features & Use Cases

  • Viewport-Relative Sizing: Ensures media elements respect available viewport space, leaving room for footer content.
  • Flexbox Shrinkage Control: Utilizes min-h-0 and flex-shrink-0 to manage how media and footer elements resize within flex containers.
  • Scrollable Modals: Implements overflow-y-auto on the modal container as a fallback for very small viewports.
  • Use Case: When a video in a modal is too tall for a short screen, and the "Watch on YouTube" link below it disappears, this skill makes the link visible and accessible.

Quick Start

Apply the CSS pattern described in the documentation to your modal's media and footer elements to ensure they remain visible.

Frequently Asked Questions about modal-media-viewport-overflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix modal content cut off below large media when body scroll is locked?▼

Viewport-relative sizing with dvh and flexbox shrinkage control fixes inaccessible modal content by ensuring media respects available viewport space and leaves room for footer elements to remain visible.

Why does my video push the footer off-screen in a fixed CSS flexbox modal?▼

The video pushes the footer off-screen due to uncontrolled flexbox growth. Applying min-h-0 to the media container and flex-shrink-0 to the footer forces the media to shrink within the viewport.

How to use CSS calc and dvh to manage modal overflow for short viewports?▼

Use CSS calc and dvh to set viewport-relative min-heights on media elements, ensuring they scale dynamically to fit short viewports while preserving space for footer content.

How do I make a modal scrollable as a fallback for very small viewport heights?▼

Implement overflow-y-auto on the modal container to make it scrollable, providing a fallback for very small viewports where viewport-relative sizing cannot fully prevent content overflow.

Do I need specific CSS knowledge to implement viewport-relative modal sizing?▼

Yes, you need an intermediate understanding of CSS calc, dvh units, min-height, and flex-shrink properties to properly implement viewport-relative modal sizing and manage flexbox shrinkage.

Related Skills

Explore More Software Engineering Skills→
christophevgchristophevg

vuetify-v4

Fix Vuetify 4 page layouts in Baseweb projects with correct component hierarchy and layout props.

Community
Intermediate
saint2706saint2706

responsive-design

Generate mobile-first responsive web designs using CSS Grid, Flexbox, and media queries.

Community
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
fideguchfideguch
1

frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JavaScript.

Community
Advanced