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:

1. Overflow Utilities - Control how content that exceeds its container is handled
2. Float Utilities - Legacy float-based layout control
3. 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

1. Prefer modern layout systems: Use CSS Grid and Flexbox for most layout needs
2. Use floats sparingly: Floats can cause unexpected layout issues; use them only when necessary
3. Always clear floats: When using floats, always clear them to avoid layout issues
4. Handle overflow carefully: Be mindful of hiding important content when using overflow-hidden
5. 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 RTL
• float-end will float right in LTR and left in RTL

This makes your layouts automatically compatible with different text direction settings.