tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Overflow Utilities

Name: tessl/npm-primeflex
Author: tessl

Overflow utilities control how content behaves when it exceeds the boundaries of its container. PrimeFlex provides utilities for controlling overflow behavior on both axes.

Capabilities

Overflow Control

Controls the overflow behavior for both horizontal and vertical axes.

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

Horizontal Overflow

Controls overflow behavior specifically for the horizontal axis.

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

Vertical Overflow

Controls overflow behavior specifically for the vertical axis.

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

Usage Examples

<!-- Scrollable container with auto overflow -->
<div class="overflow-auto h-4 w-full">
  <div class="h-8">Content that exceeds container height</div>
</div>

<!-- Hide overflow for cropped content -->
<div class="overflow-hidden">
  <img src="large-image.jpg" class="w-full" />
</div>

<!-- Horizontal scroll only -->
<div class="overflow-x-scroll overflow-y-hidden">
  <div class="w-screen">Wide content that scrolls horizontally</div>
</div>