CSS Tutorial

CSS Overflow

Last modified on: October 21, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">CSS Overflow: Handling Overflowing Content</h2>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="43e2b361-c2b0-4a6f-9372-3b3e2c6365c3" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>The <code>overflow</code> property in CSS is used to control what happens when content inside an element exceeds its bounding box (or container). By default, content that doesn't fit within the boundaries of an element will overflow, which may cause layout issues or result in hidden content. The <code>overflow</code> property helps manage how to handle such overflow, whether it should be hidden, scrolled, or visible.</p>
<hr />
<h3>Syntax</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>element {
    overflow: visible | hidden | scroll | auto;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Values of <code>overflow</code></h3>
<ol>
<li>
<p><strong><code>visible</code></strong> (default): Content is not clipped and will overflow the element's box. The content extends beyond the boundaries of the container.</p>
</li>
<li>
<p><strong><code>hidden</code></strong>: Content is clipped (cut off) and anything that overflows the container is hidden. No scrollbars will appear.</p>
</li>
<li>
<p><strong><code>scroll</code></strong>: The content is clipped, but scrollbars are added to allow users to scroll and view the hidden content. Scrollbars will always be visible, regardless of whether the content overflows or not.</p>
</li>
<li>
<p><strong><code>auto</code></strong>: Scrollbars will appear <strong>only if necessary</strong>&mdash;i.e., only if the content overflows the container. If there is no overflow, no scrollbars will be displayed.</p>
</li>
</ol>
<hr />
<h3>Example: Different Overflow Properties</h3>
<h4>HTML Example</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Overflow Example&lt;/title&gt;
    &lt;style&gt;
        .box {
            width: 200px;
            height: 100px;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #333;
        }

.overflow-visible {
            overflow: visible;
            background-color: #f8d7da;
        }

.overflow-hidden {
            overflow: hidden;
            background-color: #d1ecf1;
        }

.overflow-scroll {
            overflow: scroll;
            background-color: #c3e6cb;
        }

.overflow-auto {
            overflow: auto;
            background-color: #fff3cd;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="box overflow-visible"&gt;
        &lt;p&gt;This is an example of &lt;strong&gt;overflow: visible&lt;/strong&gt;. The content will overflow outside of this box.&lt;/p&gt;
        &lt;p&gt;This text should overflow the box.&lt;/p&gt;
    &lt;/div&gt;

&lt;div class="box overflow-hidden"&gt;
        &lt;p&gt;This is an example of &lt;strong&gt;overflow: hidden&lt;/strong&gt;. The overflowing content will be hidden.&lt;/p&gt;
        &lt;p&gt;This text should be clipped and hidden if it overflows the box.&lt;/p&gt;
    &lt;/div&gt;

&lt;div class="box overflow-scroll"&gt;
        &lt;p&gt;This is an example of &lt;strong&gt;overflow: scroll&lt;/strong&gt;. The content will overflow, and scrollbars will appear.&lt;/p&gt;
        &lt;p&gt;This text should overflow and trigger scrollbars.&lt;/p&gt;
    &lt;/div&gt;

&lt;div class="box overflow-auto"&gt;
        &lt;p&gt;This is an example of &lt;strong&gt;overflow: auto&lt;/strong&gt;. Scrollbars will appear only if the content overflows.&lt;/p&gt;
        &lt;p&gt;This text may or may not overflow, depending on the size of the box.&lt;/p&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Explanation of Values</h3>
<ol>
<li>
<p><strong><code>visible</code></strong>:</p>
<ul>
<li>The content overflows the container without any clipping or scrollbars.</li>
<li>The extra content will simply extend outside the boundaries of the container.</li>
</ul>
</li>
<li>
<p><strong><code>hidden</code></strong>:</p>
<ul>
<li>The overflowing content is hidden (clipped).</li>
<li>Users won&rsquo;t be able to see or access the content that extends beyond the container&rsquo;s boundaries.</li>
</ul>
</li>
<li>
<p><strong><code>scroll</code></strong>:</p>
<ul>
<li>The content is clipped, and scrollbars (both horizontal and vertical) are added.</li>
<li>Even if the content doesn't overflow, scrollbars will still appear.</li>
</ul>
</li>
<li>
<p><strong><code>auto</code></strong>:</p>
<ul>
<li>Scrollbars will appear <strong>only</strong> if the content overflows. If the content fits within the container, no scrollbars will be shown.</li>
</ul>
</li>
</ol>
<hr />
<h3>Additional Overflow Properties</h3>
<ul>
<li>
<p><strong><code>overflow-x</code></strong>: Controls the overflow on the horizontal axis (left and right).</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>element {
    overflow-x: scroll; /* Scroll only horizontally */
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong><code>overflow-y</code></strong>: Controls the overflow on the vertical axis (top and bottom).</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>element {
    overflow-y: hidden; /* Hide content overflowing vertically */
}
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ul>
<h4>Example: Overflow-x and Overflow-y</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="box" style="overflow-x: scroll; overflow-y: hidden;"&gt;
    &lt;p&gt;This box has horizontal scrolling enabled but vertical overflow is hidden. You can only scroll left or right.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Practical Use Cases for <code>overflow</code></h3>
<ol>
<li><strong>Content boxes</strong>: Control how content within a box behaves when it exceeds the box size.</li>
<li><strong>Scrollable elements</strong>: Use <code>overflow: scroll</code> or <code>auto</code> to make certain sections of the webpage scrollable without affecting the rest of the page.</li>
<li><strong>Modals and fixed-height containers</strong>: Manage overflowing content in modals or containers with a fixed height by adding scrollbars only when necessary.</li>
</ol>
<hr />
<h3>Clipping with <code>overflow: hidden</code></h3>
<p>If you use <code>overflow: hidden</code>, it can be helpful for creating visually clean designs, where you don't want any content spilling out of its container. However, keep in mind that users will not be able to scroll to see the hidden content.</p>
<h4>Example: Image Clipping</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="box" style="width: 150px; height: 150px; overflow: hidden;"&gt;
    &lt;img src="example.jpg" alt="Example Image" width="300" height="300"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, the image is larger than the box, but using <code>overflow: hidden</code>, only the portion of the image that fits inside the 150x150 box will be shown, and the rest will be clipped.</p>
<hr />
<h3>CSS Overflow and Flexbox</h3>
<p>When using Flexbox, you can apply the <code>overflow</code> property to ensure the flex items don&rsquo;t overflow their container. In situations where the container has a fixed width and height, you may need to use <code>overflow: auto</code> or <code>scroll</code> to prevent content from breaking the layout.</p>
<h4>Example: Flexbox with Overflow</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div style="display: flex; height: 200px;"&gt;
    &lt;div style="flex: 1; overflow: auto;"&gt;
        &lt;p&gt;Content that overflows in this flex item will be scrollable.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>The <code>overflow</code> property is essential for controlling how content that exceeds its container is handled. Whether you're creating scrollable areas or hiding overflowing content, it allows you to manage the layout effectively while improving user experience.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More