<!-- Basic overflow utilities -->
<div class="overflow-visible">
  Content visible outside container (default)
</div>

<div class="overflow-hidden">
  Content clipped, no scrollbars
</div>

<div class="overflow-scroll">
  Always show scrollbars
</div>

<div class="overflow-auto">
  Show scrollbars only when needed
</div>

<!-- With fixed height -->
<div class="overflow-auto" style="height: 200px;">
  <p>Long content that may need scrolling...</p>
</div>

<!-- Inline elements -->
<span class="overflow-hidden d-inline-block" style="max-width: 100px;">
  Text that might overflow
</span>

<!-- Axis-specific overflow -->
<div class="overflow-x-auto">
  Horizontal scrolling when needed
</div>

<div class="overflow-y-auto">
  Vertical scrolling when needed
</div>

<div class="overflow-x-hidden">
  Hide horizontal overflow
</div>

<div class="overflow-y-hidden">
  Hide vertical overflow
</div>

<div class="overflow-x-scroll">
  Always show horizontal scrollbar
</div>

<div class="overflow-y-scroll">
  Always show vertical scrollbar
</div>

<!-- Combined axis overflow -->
<div class="overflow-x-auto overflow-y-hidden">
  <!-- Horizontal auto, vertical hidden -->
</div>

<div class="overflow-x-hidden overflow-y-auto">
  <!-- Horizontal hidden, vertical auto -->
</div>

<div class="overflow-x-auto overflow-y-auto">
  <!-- Both axes auto -->
</div>

<!-- Practical examples -->
<div class="overflow-x-auto" style="max-width: 100%;">
  <table class="table">
    <!-- Wide table that scrolls horizontally -->
  </table>
</div>

<div class="overflow-y-auto" style="max-height: 300px;">
  <!-- Long content that scrolls vertically -->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- More items -->
  </ul>
</div>

<!-- Text overflow utilities -->
<div class="text-truncate" style="max-width: 200px;">
  Long text truncated with ellipsis
</div>

<div class="text-nowrap">
  Text that won't wrap to next line
</div>

<div class="text-wrap">
  Text that wraps normally (default)
</div>

<div class="text-break">
  Long words will break to prevent overflow
</div>

<!-- Combined with overflow -->
<div class="overflow-hidden text-truncate">
  <!-- Hidden overflow with truncation -->
</div>

<!-- In table cells -->
<table class="table">
  <tr>
    <td class="text-truncate" style="max-width: 150px;">
      Long product name truncated
    </td>
    <td>
      <div class="overflow-hidden" style="max-height: 50px;">
        Long description with limited height
      </div>
    </td>
  </tr>
</table>

<!-- Practical examples -->
<!-- Email addresses -->
<div class="text-truncate" style="max-width: 200px;">
  very.long.email.address@companydomain.com
</div>

<!-- File paths -->
<div class="text-break">
  /users/username/projects/verylongprojectname/src/components/longcomponentname.js
</div>

<!-- URLs -->
<a href="#" class="text-truncate d-inline-block" style="max-width: 200px;">
  https://www.example.com/very/long/url/path/that/needs/truncation
</a>

<!-- Responsive overflow -->
<div class="overflow-auto overflow-md-visible">
  <!-- Auto scroll on mobile, visible on tablet+ -->
</div>

<div class="overflow-hidden overflow-lg-scroll">
  <!-- Hidden on mobile, scroll on desktop -->
</div>

<!-- Axis-specific responsive overflow -->
<div class="overflow-x-auto overflow-x-lg-hidden">
  <!-- Horizontal auto on mobile, hidden on desktop -->
</div>

<div class="overflow-y-auto overflow-y-md-scroll">
  <!-- Vertical auto on mobile, scroll on tablet+ -->
</div>

<!-- Responsive text overflow -->
<div class="text-truncate text-md-wrap text-lg-nowrap">
  <!-- 
    Truncated on mobile
    Normal wrap on tablet
    No wrap on desktop
  -->
</div>

<div class="text-nowrap text-lg-wrap">
  <!-- No wrap on mobile, wrap on desktop -->
</div>

<!-- Complete responsive example -->
<div class="overflow-auto overflow-md-hidden overflow-lg-scroll" 
     style="height: 200px;">
  <!-- 
    Auto on mobile
    Hidden on tablet
    Scroll on desktop
  -->
</div>

<!-- Table with responsive overflow -->
<div class="table-responsive overflow-auto overflow-md-visible">
  <table class="table">
    <!-- Scrollable on mobile, visible on tablet+ -->
  </table>
</div>

<!-- Custom scrollbar CSS (not Bootstrap utility) -->
<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  /* Hide scrollbar but keep functionality */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
</style>

<!-- Usage -->
<div class="overflow-auto custom-scrollbar" style="height: 200px;">
  <!-- Custom styled scrollbar -->
</div>

<div class="overflow-auto hide-scrollbar" style="height: 200px;">
  <!-- Hidden scrollbar but still scrollable -->
</div>

<!-- Bootstrap-only approach -->
<div class="overflow-auto" style="height: 200px; scrollbar-width: thin;">
  <!-- Native scrollbar styling -->
</div>

<!-- Accessibility consideration -->
<div class="overflow-auto" 
     style="height: 200px;"
     tabindex="0"
     aria-label="Scrollable content area">
  <!-- Scrollable content with keyboard accessibility -->
</div>