> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overflow

> Control clipping and scrolling with the bundled overflow utilities.

export const OverflowHiddenDemo = () => {
  const content = "Andrew Alfred is a highly accomplished technical advisor and strategist with a broad range of expertise across many different disciplines. His wide knowledge base and deep understanding of various fields make him a sought-after consultant for complex projects spanning artificial intelligence, enterprise architecture, cloud computing, and beyond. Over his career, Andrew has been involved in a vast array of challenging problems.";
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.overflow-hidden</span>
        <div className="tw-demo-card" style={{
    overflow: "hidden",
    height: "10rem"
  }}>
          <div style={{
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
    marginBottom: "0.75rem"
  }}>
            <div style={{
    width: "2.5rem",
    height: "2.5rem",
    borderRadius: "9999px",
    background: "linear-gradient(135deg, #38bdf8, #a855f7)",
    flexShrink: 0
  }} />
            <div>
              <div style={{
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "var(--demo-fg)"
  }}>Andrew Alfred</div>
              <div style={{
    fontSize: "0.75rem",
    color: "var(--demo-fg-subtle)"
  }}>Technical Advisor</div>
            </div>
          </div>
          <p style={{
    fontSize: "0.8rem",
    lineHeight: 1.6,
    color: "var(--demo-fg-subtle)"
  }}>{content}</p>
        </div>
      </div>
    </div>;
};

export const OverflowAutoDemo = () => {
  const content = "Andrew Alfred is a highly accomplished technical advisor and strategist with a broad range of expertise across many different disciplines. His wide knowledge base and deep understanding of various fields make him a sought-after consultant for complex projects spanning artificial intelligence, enterprise architecture, cloud computing, and beyond. Over his career, Andrew has been involved in a vast array of challenging problems that required creative and innovative solutions.";
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.overflow-auto</span>
        <div className="tw-demo-card" style={{
    overflow: "auto",
    height: "10rem"
  }}>
          <div style={{
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
    marginBottom: "0.75rem"
  }}>
            <div style={{
    width: "2.5rem",
    height: "2.5rem",
    borderRadius: "9999px",
    background: "linear-gradient(135deg, #38bdf8, #a855f7)",
    flexShrink: 0
  }} />
            <div>
              <div style={{
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "var(--demo-fg)"
  }}>Andrew Alfred</div>
              <div style={{
    fontSize: "0.75rem",
    color: "var(--demo-fg-subtle)"
  }}>Technical Advisor</div>
            </div>
          </div>
          <p style={{
    fontSize: "0.8rem",
    lineHeight: 1.6,
    color: "var(--demo-fg-subtle)"
  }}>{content}</p>
        </div>
      </div>
    </div>;
};

export const OverflowVisibleDemo = () => {
  const content = "Andrew Alfred is a highly accomplished technical advisor and strategist with a broad range of expertise across many different disciplines. His wide knowledge base and deep understanding make him a sought-after consultant.";
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.overflow-visible (default)</span>
        <div className="tw-demo-card" style={{
    overflow: "visible",
    height: "6rem"
  }}>
          <div style={{
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
    marginBottom: "0.75rem"
  }}>
            <div style={{
    width: "2.5rem",
    height: "2.5rem",
    borderRadius: "9999px",
    background: "linear-gradient(135deg, #38bdf8, #a855f7)",
    flexShrink: 0
  }} />
            <div>
              <div style={{
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "var(--demo-fg)"
  }}>Andrew Alfred</div>
              <div style={{
    fontSize: "0.75rem",
    color: "var(--demo-fg-subtle)"
  }}>Technical Advisor</div>
            </div>
          </div>
          <p style={{
    fontSize: "0.8rem",
    lineHeight: 1.6,
    color: "var(--demo-fg-subtle)"
  }}>{content}</p>
        </div>
        <div style={{
    height: "6rem"
  }} />
      </div>
    </div>;
};

## Overview

Use overflow utilities when content needs to be clipped, scrollable, or explicitly allowed to spill outside its frame. The bundle ships **`overflow-hidden`**, **`overflow-auto`**, and **`overflow-visible`**, each with responsive **`--on-*`** suffix variants like other structural utilities (see [Breakpoints](/concepts/responsive-utilities)).

| Class               | CSS                  | Usage                                                         |
| ------------------- | -------------------- | ------------------------------------------------------------- |
| `.overflow-hidden`  | `overflow: hidden;`  | Clip overflowing content                                      |
| `.overflow-auto`    | `overflow: auto;`    | Scroll only when needed                                       |
| `.overflow-visible` | `overflow: visible;` | Let content extend past the box; reset clipping from a parent |

## Overflow Visible

Without an overflow class, browsers use **`overflow: visible`** by default. Use **`.overflow-visible`** when you need to **name** that behavior—typically to override an ancestor’s **`overflow-hidden`** or to make overflow explicit in the class list. The demo below illustrates visible overflow; in real markup, apply **`.overflow-visible`** on the element you want to unclip.

<OverflowVisibleDemo />

## Overflow Hidden

`.overflow-hidden` clips any content that extends beyond the container boundaries. The clipped content is not accessible via scrolling.

<OverflowHiddenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden border-1 border-solid border-gray rounded" style="width: 18rem; height: 8rem;">
  <p class="padding-4">
    This content might overflow the container and will be hidden if it does.
  </p>
</div>
```

## Overflow Auto

`.overflow-auto` adds scrollbars only when content overflows. This keeps content reachable without cluttering the UI with unnecessary scrollbars.

<OverflowAutoDemo />

```html theme={null}
<div class="elementor-element overflow-auto border-1 border-solid border-gray rounded" style="width: 18rem; height: 8rem;">
  <p class="padding-4">
    This content will show scrollbars when it overflows the container.
  </p>
</div>
```

## Best Practices

<Steps>
  <Step title="Use Hidden for Cropped Surfaces">
    `overflow-hidden` is ideal for rounded media cards, avatars, and framed layouts.
  </Step>

  <Step title="Use Auto for Accessible Long Content">
    `overflow-auto` keeps content reachable without forcing scrollbars when they are not needed.
  </Step>

  <Step title="Give the Container a Real Frame">
    Overflow only becomes visible when the element has constrained size through height, width, or aspect ratio.
  </Step>

  <Step title="Pair With Object Fit">
    Overflow and object-fit work especially well together for media-heavy layouts.
  </Step>

  <Step title="Use Visible to Reset Clipping">
    When a parent uses `overflow-hidden` but a child must escape the clip (for example a dropdown or tooltip), `overflow-visible` on the right ancestor restores visible overflow.
  </Step>
</Steps>

## Related Utilities

<CardGroup cols={2}>
  <Card title="Display" icon="display" href="/layout/display">
    Display utilities for container behavior
  </Card>

  <Card title="Object Fit" icon="object-intersect" href="/layout/object-fit">
    Control how images fit in containers
  </Card>
</CardGroup>