Overflow & Float Utilities
The Phenix Design System provides utilities for controlling content overflow and using float-based layouts. These utilities help manage content containment and create legacy layout patterns.
Overview
This documentation covers:
- Overflow Utilities - Control how content that exceeds its container is handled
- Float Utilities - Legacy float-based layout control
- Clearfix Utilities - Clear floated elements
Overflow Utilities
Overflow utilities control how content that exceeds its container dimensions is displayed:
Hidden Overflow
Hide content that overflows its container:
<!-- Hide overflow in all directions -->
<div class="overflow-hidden">
Content that exceeds this container will be clipped
</div>
<!-- Hide overflow vertically only -->
<div class="overflow-y-hidden">
Vertical overflow will be hidden, horizontal will show
</div>
<!-- Hide overflow horizontally only -->
<div class="overflow-x-hidden">
Horizontal overflow will be hidden, vertical will show
</div>
Scrollable Overflow
Add scrollbars when content overflows:
<!-- Add scrollbars when content overflows -->
<div class="overflow-auto">
Scrollbars appear when content exceeds container
</div>
<!-- Add vertical scrollbar only when needed -->
<div class="overflow-y-auto">
Vertical scrollbar appears when needed
</div>
<!-- Add horizontal scrollbar only when needed -->
<div class="overflow-x-auto">
Horizontal scrollbar appears when needed
</div>
Float Utilities
While modern layouts primarily use flexbox and grid, float utilities remain available for legacy layout patterns:
<!-- Float element to the start (left in LTR, right in RTL) -->
<div class="float-start">
This element floats to the start
</div>
<!-- Float element to the end (right in LTR, left in RTL) -->
<div class="float-end">
This element floats to the end
</div>
Clearfix Utilities
Clear the effect of floated elements:
<!-- Clear floated elements -->
<div class="clear-fix">
This clears preceding floats
</div>
<!-- Clear floats using ::after pseudo-element -->
<div class="clear-after">
This clears floats with ::after pseudo-element
</div>
The clear-after
class adds the clearfix hack by adding an ::after
pseudo-element with clear: both
.
Use Cases
Managing Long Content
<!-- Create a scrollable container for long content -->
<div class="overflow-y-auto" style="height: 300px;">
<p>Long content that will scroll vertically...</p>
<!-- More content -->
</div>
Creating a Responsive Table
<!-- Make table horizontally scrollable on small screens -->
<div class="overflow-x-auto">
<table class="table">
<!-- Table content with many columns -->
</table>
</div>
Simple Two-Column Layout with Floats
<!-- Legacy float-based layout -->
<div class="clear-after">
<div class="float-start" style="width: 30%;">
Sidebar content
</div>
<div class="float-end" style="width: 65%;">
Main content
</div>
</div>
Image Wrapping with Text
<!-- Float image within text -->
<p>
<img src="image.jpg" alt="Sample image" class="float-start" style="margin-right: 15px;">
Text will wrap around this floated image. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.
Donec in efficitur leo. In hac habitasse platea dictumst.
</p>
Best Practices
- Prefer modern layout systems: Use CSS Grid and Flexbox for most layout needs
- Use floats sparingly: Floats can cause unexpected layout issues; use them only when necessary
- Always clear floats: When using floats, always clear them to avoid layout issues
- Handle overflow carefully: Be mindful of hiding important content when using
overflow-hidden
- Include scrolling indicators: When using
overflow-auto
, consider adding visual cues to indicate scrollable content
RTL Support
Float utilities automatically adapt to RTL (right-to-left) languages:
float-start
will float left in LTR and right in RTLfloat-end
will float right in LTR and left in RTL
This makes your layouts automatically compatible with different text direction settings.