overflow : Overflow Property

The overflow property controls how content is handled when it exceeds the boundaries of its containing element. This is essential for managing text flow, constraining content areas, and creating scrollable regions in PDF documents.

Usage

selector {
    overflow: value;
}

The overflow property determines what happens when content is too large to fit within an element’s content box. This property sets both horizontal and vertical overflow behavior simultaneously.

Supported Values

visible (default)

Content is not clipped and may render outside the element’s box. Overflow content is visible and may overlap other elements.

hidden

Overflow content is clipped and not visible. Content that extends beyond the element’s boundaries is cut off without any indication.

scroll

Overflow content is clipped, but scrolling mechanisms are provided (in interactive contexts). For PDF generation, this typically means content is clipped similar to hidden.

auto

Overflow content is clipped, and scrolling mechanisms are provided only when necessary. In PDF contexts, this typically behaves like hidden or allows content to flow to additional pages.

Supported Elements

The overflow property can be applied to:

Block elements with explicit dimensions (<div>, <section>, <article>)
Elements with defined width and height
Container elements
Text boxes and content areas
Table cells (<td>, <th>)
Any element where content might exceed boundaries

Notes

The element must have explicit dimensions (width/height) for overflow to take effect
overflow: visible is the default and allows content to extend beyond boundaries
overflow: hidden is useful for cropping content to exact dimensions
Hidden overflow prevents content from overlapping adjacent elements
In PDF generation, overflow handling affects pagination and content flow
Use overflow to create fixed-size content areas with controlled dimensions
Overflow applies to both the content and padding areas
Child elements with positioning may still extend beyond overflow boundaries
Text truncation and ellipsis are not automatic; hidden text is simply clipped
Overflow behavior can differ between horizontal and vertical directions (use overflow-x and overflow-y)

Data Binding

The overflow property integrates with data binding to create dynamic content areas that adapt their clipping behavior based on data conditions. This enables responsive content handling, conditional overflow management, and adaptive container sizing.

Example 1: Dynamic overflow based on content length

<style>
    .content-box {
        width: 400pt;
        height: 150pt;
        padding: 15pt;
        border: 2pt solid #2563eb;
        background-color: #dbeafe;
        margin-bottom: 20pt;
    }
</style>
<body>
    <!-- Apply overflow: hidden only when content exceeds threshold -->
    <div class="content-box" style="overflow: ">
        <h3></h3>
        <p><h1 id="overflow-y--vertical-overflow-property">overflow-y : Vertical Overflow Property</h1>

<p>The <code class="language-plaintext highlighter-rouge">overflow-y</code> property controls how content is handled when it exceeds the vertical boundaries of its containing element. This allows independent control of vertical overflow behavior, essential for fixed-height containers, content cards, and paginated layouts in PDF documents.</p>

<h2 id="usage">Usage</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">selector</span> <span class="p">{</span>
    <span class="nl">overflow-y</span><span class="p">:</span> <span class="n">value</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>The overflow-y property specifically controls vertical overflow while leaving horizontal overflow behavior unaffected. This enables precise control over content clipping in the vertical direction.</p>

<hr />

<h2 id="supported-values">Supported Values</h2>

<h3 id="visible-default">visible (default)</h3>
<p>Content is not clipped vertically and may extend beyond the element’s top and bottom boundaries. Overflow content is visible and may overlap adjacent elements.</p>

<h3 id="hidden">hidden</h3>
<p>Vertical overflow content is clipped and not visible. Content that extends beyond the element’s height is cut off without any indication.</p>

<h3 id="scroll">scroll</h3>
<p>Vertical overflow content is clipped, and scrolling mechanisms are provided (in interactive contexts). For PDF generation, this typically means content is clipped similar to hidden.</p>

<h3 id="auto">auto</h3>
<p>Vertical overflow content is clipped, and scrolling mechanisms are provided only when necessary. In PDF contexts, this typically behaves like hidden or allows content to flow to additional pages.</p>

<hr />

<h2 id="supported-elements">Supported Elements</h2>

<p>The <code class="language-plaintext highlighter-rouge">overflow-y</code> property can be applied to:</p>
<ul>
  <li>Block elements with explicit height (<code class="language-plaintext highlighter-rouge">&lt;div&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;section&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;article&gt;</code>)</li>
  <li>Elements with defined height</li>
  <li>Container elements</li>
  <li>Text boxes and content areas</li>
  <li>Fixed-height cards and panels</li>
  <li>Any element where vertical content might exceed boundaries</li>
</ul>

<hr />

<h2 id="notes">Notes</h2>

<ul>
  <li>The element must have an explicit height for overflow-y to take effect</li>
  <li><code class="language-plaintext highlighter-rouge">overflow-y</code> affects only vertical content overflow</li>
  <li>Use with <code class="language-plaintext highlighter-rouge">overflow-x</code> for independent control of both axes</li>
  <li>Essential for creating consistent fixed-height content cards</li>
  <li>Hidden vertical overflow prevents content from extending beyond designated areas</li>
  <li>In PDF generation, vertical overflow affects pagination and content flow</li>
  <li>The shorthand <code class="language-plaintext highlighter-rouge">overflow</code> property sets both overflow-x and overflow-y simultaneously</li>
  <li>Vertical clipping occurs exactly at the boundary without fade effects</li>
  <li>Useful for preview sections that show only partial content</li>
  <li>Helps maintain consistent spacing and layout rhythm in documents</li>
</ul>

<hr />

<h2 id="data-binding">Data Binding</h2>

<p>The overflow-y property integrates with data binding to manage vertical content overflow dynamically based on content volume, container constraints, and layout preferences. This enables adaptive card heights, conditional content clipping, and responsive vertical layouts.</p>

<h3 id="example-1-dynamic-card-heights-with-overflow-control">Example 1: Dynamic card heights with overflow control</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.content-card</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">300pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="c">&lt;!-- Apply fixed height and overflow-y based on card configuration --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-card"</span>
         <span class="na">style=</span><span class="s">"height: ;
                overflow-y: "</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3&gt;&lt;/h3&gt;</span>
        <span class="nt">&lt;p&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="c">&lt;!-- Conditional overflow for preview vs full view --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-card"</span>
         <span class="na">style=</span><span class="s">"height: ;
                overflow-y: "</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3&gt;</span>Article: <span class="nt">&lt;/h3&gt;</span>
        <span class="nt">&lt;div&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-2-adaptive-overflow-for-dashboard-panels">Example 2: Adaptive overflow for dashboard panels</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.dashboard-panel</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">320pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="c">&lt;!-- Dynamic panel height based on dashboard layout --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dashboard-panel"</span>
         <span class="na">style=</span><span class="s">"height: pt;
                overflow-y: "</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3&gt;&lt;/h3&gt;</span>
        
        <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"margin-bottom: 10pt;"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"color: #6b7280;"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 20pt; font-weight: bold; color: #2563eb;"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        
    <span class="nt">&lt;/div&gt;</span>

    <span class="c">&lt;!-- Conditional overflow based on user preferences --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dashboard-panel"</span>
         <span class="na">style=</span><span class="s">"height: ;
                overflow-y: "</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3&gt;</span>Activity Feed<span class="nt">&lt;/h3&gt;</span>
        
        <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"padding: 10pt; border-bottom: 1pt solid #e5e7eb;"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;strong&gt;&lt;/strong&gt;</span>: 
        <span class="nt">&lt;/div&gt;</span>
        
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-3-responsive-content-lists-with-overflow">Example 3: Responsive content lists with overflow</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.content-list</span> <span class="p">{</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.list-header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.list-content</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="c">&lt;!-- Dynamic list height based on display mode --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-list"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-header"</span><span class="nt">&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-content"</span>
             <span class="na">style=</span><span class="s">"height: ;
                    overflow-y: "</span><span class="nt">&gt;</span>
            
            <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"padding: 12pt; margin-bottom: 10pt; background-color: #f9fafb; border: 1pt solid #e5e7eb;"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;strong&gt;&lt;/strong&gt;</span>
                <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0;"</span><span class="nt">&gt;&lt;/p&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="c">&lt;!-- Conditional overflow for different page sizes --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"width: 500pt;
                height: ;
                overflow-y: ;
                border: 2pt solid #e5e7eb;
                padding: 20pt;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;&lt;/h2&gt;</span>
        <span class="nt">&lt;div&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-fixed-height-content-box">Example 1: Fixed-height content box</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.content-box</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">400pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.content-box</span> <span class="nt">h3</span> <span class="p">{</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e40af</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.content-box</span> <span class="nt">p</span> <span class="p">{</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-box"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3&gt;</span>Article Preview<span class="nt">&lt;/h3&gt;</span>
        <span class="nt">&lt;p&gt;</span>This content box has a fixed height of 150pt with overflow-y: hidden.
        Any content that extends beyond this height will be clipped.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>Additional paragraphs may be partially or completely hidden if there
        is too much content to fit within the designated space.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>This paragraph might not be visible at all depending on the amount
        of content above it.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p&gt;</span>More content continues here but is likely clipped...<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;p&gt;</span>Content below the box appears in its normal position without overlap.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-2-comparison-of-overflow-y-values">Example 2: Comparison of overflow-y values</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.demo-container</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">250pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">120pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#1f2937</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.overflow-visible</span> <span class="p">{</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.overflow-hidden</span> <span class="p">{</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dcfce7</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.demo-label</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Overflow-Y Property Comparison<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"padding: 20pt;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"demo-container overflow-visible"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"demo-label"</span><span class="nt">&gt;</span>overflow-y: visible<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0;"</span><span class="nt">&gt;</span>This content may extend beyond the bottom
            boundary of the container. Multiple paragraphs of text will overflow
            and potentially overlap content below.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0;"</span><span class="nt">&gt;</span>Additional content continues here and may
            extend beyond the fixed height.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"demo-container overflow-hidden"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"demo-label"</span><span class="nt">&gt;</span>overflow-y: hidden<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0;"</span><span class="nt">&gt;</span>This content is clipped at the bottom
            boundary. Any text that extends beyond the 120pt height is cut off
            and not visible in the output.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0;"</span><span class="nt">&gt;</span>This paragraph might be partially or
            completely hidden.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-3-article-preview-cards">Example 3: Article preview cards</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.article-grid</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.article-card</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">300pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.card-image</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">150pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.card-content</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.card-title</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.card-excerpt</span> <span class="p">{</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">80pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.read-more</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article-grid"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article-card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-image"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-content"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Understanding PDF Layout<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-excerpt"</span><span class="nt">&gt;</span>
                    Learn the fundamentals of PDF document generation and layout
                    control. This comprehensive guide covers everything from basic
                    concepts to advanced techniques for creating professional
                    documents. Discover how overflow properties help maintain
                    consistent card heights regardless of content length.
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"read-more"</span><span class="nt">&gt;</span>Read More<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"article-card"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-image"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-content"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Advanced Techniques<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-excerpt"</span><span class="nt">&gt;</span>
                    Short preview text.
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"read-more"</span><span class="nt">&gt;</span>Read More<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-4-dashboard-metrics-panel">Example 4: Dashboard metrics panel</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.dashboard</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.metrics-panel</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">320pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">250pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.panel-title</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.metric-item</span> <span class="p">{</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
        <span class="nl">border-left</span><span class="p">:</span> <span class="m">4pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.metric-label</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
        <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.metric-value</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dashboard"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metrics-panel"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">&gt;</span>Sales Metrics<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-label"</span><span class="nt">&gt;</span>Total Revenue<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-value"</span><span class="nt">&gt;</span>$487,250<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-label"</span><span class="nt">&gt;</span>Orders<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-value"</span><span class="nt">&gt;</span>1,842<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-label"</span><span class="nt">&gt;</span>Avg Order Value<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-value"</span><span class="nt">&gt;</span>$264.50<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-label"</span><span class="nt">&gt;</span>Growth Rate<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-value"</span><span class="nt">&gt;</span>+23.5%<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-label"</span><span class="nt">&gt;</span>Customer Satisfaction<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"metric-value"</span><span class="nt">&gt;</span>4.8/5.0<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-5-news-feed-with-limited-items">Example 5: News feed with limited items</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.news-feed</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">450pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">400pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feed-header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feed-content</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.news-item</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.news-time</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.news-headline</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">13pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.news-summary</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-feed"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-header"</span><span class="nt">&gt;</span>Latest Updates<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feed-content"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-time"</span><span class="nt">&gt;</span>2 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-headline"</span><span class="nt">&gt;</span>New Product Launch Announced<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-summary"</span><span class="nt">&gt;</span>
                    Company reveals innovative features for upcoming release.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-time"</span><span class="nt">&gt;</span>5 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-headline"</span><span class="nt">&gt;</span>Q4 Results Exceed Expectations<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-summary"</span><span class="nt">&gt;</span>
                    Financial performance shows strong growth across all sectors.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-time"</span><span class="nt">&gt;</span>8 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-headline"</span><span class="nt">&gt;</span>Partnership Agreement Signed<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-summary"</span><span class="nt">&gt;</span>
                    Strategic alliance to expand market presence in new regions.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-time"</span><span class="nt">&gt;</span>12 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-headline"</span><span class="nt">&gt;</span>Industry Award Recognition<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-summary"</span><span class="nt">&gt;</span>
                    Company honored for innovation and excellence.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-time"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-headline"</span><span class="nt">&gt;</span>Additional Updates<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"news-summary"</span><span class="nt">&gt;</span>
                    This item might be partially or fully clipped...
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-6-sidebar-navigation-with-overflow">Example 6: Sidebar navigation with overflow</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.layout-container</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.sidebar-nav</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">350pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">margin-right</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.nav-header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.nav-section</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.nav-category</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
        <span class="nl">margin-top</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.nav-item</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">8pt</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.nav-item.active</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#dbeafe</span><span class="p">;</span>
        <span class="nl">border-color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.main-content</span> <span class="p">{</span>
        <span class="nl">margin-left</span><span class="p">:</span> <span class="m">240pt</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"layout-container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-nav"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-header"</span><span class="nt">&gt;</span>Navigation<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-section"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-category"</span><span class="nt">&gt;</span>Dashboard<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>Overview<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Analytics<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Reports<span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-category"</span><span class="nt">&gt;</span>Products<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>All Products<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Categories<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Inventory<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-category"</span><span class="nt">&gt;</span>Customers<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Customer List<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Orders<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Support<span class="nt">&lt;/div&gt;</span>

                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-category"</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Account<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Preferences<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>Security<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"main-content"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Main Content Area<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p&gt;</span>The navigation sidebar has fixed height with overflow-y: hidden.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-7-event-listing-with-constrained-height">Example 7: Event listing with constrained height</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.events-container</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">500pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="nb">auto</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.events-header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.events-header</span> <span class="nt">h1</span> <span class="p">{</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.events-list</span> <span class="p">{</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">350pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.event-item</span> <span class="p">{</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
        <span class="nl">border-left</span><span class="p">:</span> <span class="m">5pt</span> <span class="nb">solid</span> <span class="m">#2563eb</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.event-date</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.event-title</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.event-description</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"events-container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"events-header"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Upcoming Events<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin: 5pt 0 0 0;"</span><span class="nt">&gt;</span>October - December 2025<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"events-list"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-date"</span><span class="nt">&gt;</span>October 20, 2025<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-title"</span><span class="nt">&gt;</span>Annual Conference<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-description"</span><span class="nt">&gt;</span>
                    Join us for our flagship annual conference featuring keynote
                    speakers and networking opportunities.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-date"</span><span class="nt">&gt;</span>November 5, 2025<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-title"</span><span class="nt">&gt;</span>Technical Workshop<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-description"</span><span class="nt">&gt;</span>
                    Hands-on workshop covering advanced PDF generation techniques.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-date"</span><span class="nt">&gt;</span>November 18, 2025<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-title"</span><span class="nt">&gt;</span>Webinar Series<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-description"</span><span class="nt">&gt;</span>
                    Monthly webinar covering best practices and new features.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-date"</span><span class="nt">&gt;</span>December 10, 2025<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-title"</span><span class="nt">&gt;</span>Year-End Celebration<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-description"</span><span class="nt">&gt;</span>
                    Celebrate achievements and preview upcoming plans.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-item"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-date"</span><span class="nt">&gt;</span>December 15, 2025<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-title"</span><span class="nt">&gt;</span>Planning Session<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"event-description"</span><span class="nt">&gt;</span>
                    This event might be clipped due to overflow constraints...
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-8-comment-section-with-limited-display">Example 8: Comment section with limited display</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.comments-section</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">450pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comments-header</span> <span class="p">{</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f3f4f6</span><span class="p">;</span>
        <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comments-list</span> <span class="p">{</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">300pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comment</span> <span class="p">{</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f9fafb</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">6pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comment-author</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comment-time</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">9pt</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#9ca3af</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.comment-text</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#4b5563</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comments-section"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comments-header"</span><span class="nt">&gt;</span>Comments (Showing Latest)<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comments-list"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-author"</span><span class="nt">&gt;</span>Sarah Johnson<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-time"</span><span class="nt">&gt;</span>2 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-text"</span><span class="nt">&gt;</span>
                    This is an excellent example of overflow control. The fixed
                    height ensures consistent layout across different pages.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-author"</span><span class="nt">&gt;</span>Michael Chen<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-time"</span><span class="nt">&gt;</span>4 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-text"</span><span class="nt">&gt;</span>
                    I appreciate the detailed documentation. Very helpful for
                    understanding PDF layout techniques.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-author"</span><span class="nt">&gt;</span>Emma Davis<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-time"</span><span class="nt">&gt;</span>6 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-text"</span><span class="nt">&gt;</span>
                    Great work on this feature! The examples really help clarify
                    how to use overflow-y effectively.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-author"</span><span class="nt">&gt;</span>James Wilson<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-time"</span><span class="nt">&gt;</span>8 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-text"</span><span class="nt">&gt;</span>
                    The comparison examples are particularly useful for seeing
                    the differences between values.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-author"</span><span class="nt">&gt;</span>Lisa Anderson<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-time"</span><span class="nt">&gt;</span>12 hours ago<span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"comment-text"</span><span class="nt">&gt;</span>
                    This comment might be partially or fully hidden due to the
                    overflow constraints applied to the container.
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-9-product-features-list-with-overflow">Example 9: Product features list with overflow</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.product-showcase</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">600pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="nb">auto</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#e5e7eb</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.product-header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.product-title</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">28pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">10pt</span> <span class="m">0</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.product-tagline</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.features-container</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">table</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.features-column</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">table-cell</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span>
        <span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">top</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.features-list</span> <span class="p">{</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">280pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feature</span> <span class="p">{</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">padding-left</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feature</span><span class="nd">:before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"✓"</span><span class="p">;</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
        <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#16a34a</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feature-title</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">3pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.feature-desc</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.4</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"product-showcase"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"product-header"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"product-title"</span><span class="nt">&gt;</span>Premium Package<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"product-tagline"</span><span class="nt">&gt;</span>Everything you need and more<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"features-container"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"features-column"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"features-list"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Advanced PDF Generation<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Create professional documents<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Custom Templates<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Fully customizable layouts<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Batch Processing<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Generate multiple documents<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Cloud Storage<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Secure document storage<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>API Access<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Integrate with your systems<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Analytics Dashboard<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Track usage and performance<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>24/7 Support<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Always available to help<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Priority Updates<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Get features first (may be clipped)<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"features-column"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"features-list"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Team Collaboration<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Work together seamlessly<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Version Control<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Track document changes<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>White Label Options<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Brand as your own<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Encryption<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Enterprise-grade security<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Compliance Tools<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Meet industry standards<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Workflow Automation<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Streamline processes<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-title"</span><span class="nt">&gt;</span>Multi-language Support<span class="nt">&lt;/div&gt;</span>
                        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"feature-desc"</span><span class="nt">&gt;</span>Global compatibility<span class="nt">&lt;/div&gt;</span>
                    <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-10-timeline-with-vertical-constraints">Example 10: Timeline with vertical constraints</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nc">.timeline-container</span> <span class="p">{</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">550pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">450pt</span><span class="p">;</span>
        <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">30pt</span> <span class="nb">auto</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#d1d5db</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-header</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1e3a8a</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
        <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="m">#1e3a8a</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-item</span> <span class="p">{</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">25pt</span><span class="p">;</span>
        <span class="nl">padding-left</span><span class="p">:</span> <span class="m">40pt</span><span class="p">;</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-marker</span> <span class="p">{</span>
        <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
        <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">height</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10pt</span><span class="p">;</span>
        <span class="nl">border</span><span class="p">:</span> <span class="m">3pt</span> <span class="nb">solid</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">2pt</span> <span class="m">#2563eb</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-date</span> <span class="p">{</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#2563eb</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-title</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2937</span><span class="p">;</span>
        <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">8pt</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nc">.timeline-description</span> <span class="p">{</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">11pt</span><span class="p">;</span>
        <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.6</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#6b7280</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-header"</span><span class="nt">&gt;</span>Company Milestones<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-marker"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-date"</span><span class="nt">&gt;</span>January 2025<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-title"</span><span class="nt">&gt;</span>Company Founded<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-description"</span><span class="nt">&gt;</span>
                Established with a vision to revolutionize document generation
                technology and provide innovative solutions.
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-marker"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-date"</span><span class="nt">&gt;</span>March 2025<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-title"</span><span class="nt">&gt;</span>First Product Launch<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-description"</span><span class="nt">&gt;</span>
                Released initial version with core PDF generation capabilities
                and basic layout features.
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-marker"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-date"</span><span class="nt">&gt;</span>June 2025<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-title"</span><span class="nt">&gt;</span>Major Update Released<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-description"</span><span class="nt">&gt;</span>
                Added advanced layout controls including overflow management
                and column support.
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-marker"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-date"</span><span class="nt">&gt;</span>August 2025<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-title"</span><span class="nt">&gt;</span>1000 Customers Milestone<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-description"</span><span class="nt">&gt;</span>
                Reached significant customer base demonstrating market fit.
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-marker"</span><span class="nt">&gt;&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-date"</span><span class="nt">&gt;</span>October 2025<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-title"</span><span class="nt">&gt;</span>Enterprise Features Added<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-description"</span><span class="nt">&gt;</span>
                This milestone might be partially hidden due to vertical
                overflow constraints in the timeline container.
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/cssproperties/css_prop_overflow">overflow</a> - Control both horizontal and vertical overflow</li>
  <li><a href="/reference/cssproperties/css_prop_overflow-x">overflow-x</a> - Control horizontal overflow behavior</li>
  <li><a href="/reference/cssproperties/css_prop_height">height</a> - Set element height</li>
  <li><a href="/reference/cssproperties/css_prop_max-height">max-height</a> - Set maximum height constraint</li>
  <li><a href="/reference/cssproperties/css_prop_min-height">min-height</a> - Set minimum height constraint</li>
  <li><a href="/reference/htmlattributes/attr_style">style</a> - Inline style attribute</li>
</ul>

<hr />
</p>
    </div>

    <!-- Conditional overflow for preview mode vs full view -->
    <div class="content-box" style="overflow: ; height: ">
        <h3>Article Preview</h3>
        <p></p>
    </div>
</body>

Example 2: Adaptive overflow for different page sizes

<style>
    .adaptive-container {
        width: 100%;
        padding: 20pt;
        border: 2pt solid #d1d5db;
    }
</style>
<body>
    <!-- Adjust overflow behavior based on page size -->
    <div class="adaptive-container"
         style="height: ;
                overflow: ">
        <h2></h2>
        <p></p>
    </div>

    <!-- Conditional clipping for print vs screen -->
    <div style="width: 500pt;
                height: ;
                overflow: ;
                padding: 15pt;
                border: 1pt solid #e5e7eb;">
        <h3>Content Area</h3>
        <p></p>
    </div>
</body>

Example 3: Conditional overflow for data-driven layouts

<style>
    .dashboard-panel {
        width: 300pt;
        display: inline-block;
        vertical-align: top;
        margin: 10pt;
        padding: 15pt;
        background-color: white;
        border: 2pt solid #e5e7eb;
    }
</style>
<body>
    <!-- Dynamic overflow based on panel configuration -->
    <div class="dashboard-panel"
         style="height: ;
                overflow: ">
        <h3></h3>
        <div></div>
    </div>

    <!-- Conditional overflow for different user roles -->
    <div style="width: 450pt;
                height: ;
                overflow: ;
                padding: 20pt;
                background-color: #f9fafb;">
        <h2>System Information</h2>
        <p></p>
        <div style="display: ">
            <h3>Advanced Details</h3>
            <p></p>
        </div>
    </div>
</body>

Examples

Example 1: Basic overflow hidden

<style>
    .container {
        width: 300pt;
        height: 100pt;
        overflow: hidden;
        border: 2pt solid #2563eb;
        padding: 10pt;
        background-color: #dbeafe;
    }
    .container p {
        margin: 0 0 10pt 0;
    }
</style>
<body>
    <div class="container">
        <p>This is a container with overflow: hidden.</p>
        <p>Any content that extends beyond the 100pt height will be clipped
        and not visible in the rendered output.</p>
        <p>This paragraph might be partially or completely hidden if there
        is too much content.</p>
        <p>Additional content continues here but may not be visible...</p>
    </div>
</body>

Example 2: Overflow visible (default behavior)

<style>
    .box-visible {
        width: 250pt;
        height: 80pt;
        overflow: visible;
        border: 2pt solid #16a34a;
        background-color: #dcfce7;
        padding: 10pt;
        margin-bottom: 50pt;
    }
    .box-visible p {
        margin: 0;
    }
</style>
<body>
    <h2>Overflow Visible Example</h2>
    <div class="box-visible">
        <p>This container has overflow: visible (the default).</p>
        <p>Content that exceeds the height will extend beyond the border
        and may overlap elements below.</p>
        <p>This demonstrates the default overflow behavior where content
        is not clipped.</p>
    </div>
    <p style="margin-top: 20pt;">This paragraph might be overlapped by the
    overflowing content above if there is insufficient space.</p>
</body>

Example 3: Comparison of overflow values

<style>
    .overflow-demo {
        display: inline-block;
        width: 200pt;
        height: 100pt;
        margin: 10pt;
        padding: 10pt;
        border: 2pt solid #1f2937;
        vertical-align: top;
    }
    .demo-visible {
        overflow: visible;
        background-color: #dbeafe;
    }
    .demo-hidden {
        overflow: hidden;
        background-color: #dcfce7;
    }
    .demo-label {
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 5pt;
        display: block;
    }
</style>
<body>
    <h2>Overflow Property Comparison</h2>
    <div class="overflow-demo demo-visible">
        <span class="demo-label">overflow: visible</span>
        <p style="margin: 5pt 0;">This content may extend beyond the box
        boundaries and overlap other content. The border shows the actual
        container size, but content is not restricted.</p>
    </div>
    <div class="overflow-demo demo-hidden">
        <span class="demo-label">overflow: hidden</span>
        <p style="margin: 5pt 0;">This content is clipped at the box
        boundaries. Any text or elements exceeding the height are cut off
        and not rendered in the final output.</p>
    </div>
</body>

Example 4: Fixed-height content area

<style>
    .article-preview {
        width: 400pt;
        height: 150pt;
        overflow: hidden;
        padding: 15pt;
        background-color: white;
        border: 1pt solid #d1d5db;
        margin-bottom: 20pt;
    }
    .article-preview h3 {
        margin: 0 0 10pt 0;
        color: #1e3a8a;
        font-size: 16pt;
    }
    .article-preview p {
        margin: 0 0 10pt 0;
        line-height: 1.6;
        text-align: justify;
    }
    .read-more {
        display: inline-block;
        padding: 8pt 15pt;
        background-color: #2563eb;
        color: white;
        font-weight: bold;
        margin-top: 10pt;
    }
</style>
<body>
    <div class="article-preview">
        <h3>Article Title: Understanding PDF Layout</h3>
        <p>This is a preview of a longer article. The content is constrained
        to a fixed height using overflow: hidden. Only the first portion of
        the article is visible, creating a preview effect.</p>
        <p>Additional paragraphs continue here, but they may be cut off if
        they exceed the 150pt height limit. This technique is useful for
        creating consistent card layouts or article previews.</p>
        <p>Even more content that might not be visible...</p>
        <div class="read-more">Read More</div>
    </div>
</body>

Example 5: Image cropping with overflow

<style>
    .image-container {
        width: 200pt;
        height: 150pt;
        overflow: hidden;
        border: 2pt solid #d1d5db;
        margin: 20pt;
        display: inline-block;
    }
    .image-container img {
        width: 300pt;
        height: auto;
        margin-left: -50pt;
        margin-top: -20pt;
    }
    .caption {
        text-align: center;
        font-size: 10pt;
        color: #6b7280;
        margin-top: 5pt;
    }
</style>
<body>
    <h2>Cropped Image Display</h2>
    <div style="text-align: center;">
        <div style="display: inline-block;">
            <div class="image-container">
                <img src="large-photo.jpg" alt="Cropped view" />
            </div>
            <div class="caption">Cropped to 200x150pt</div>
        </div>
    </div>
</body>

Example 6: Product card with constrained description

<style>
    .product-card {
        width: 220pt;
        margin: 15pt;
        border: 2pt solid #e5e7eb;
        background-color: white;
        display: inline-block;
        vertical-align: top;
    }
    .product-image-area {
        width: 100%;
        height: 180pt;
        overflow: hidden;
        background-color: #f3f4f6;
    }
    .product-details {
        padding: 15pt;
    }
    .product-title {
        font-size: 14pt;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 10pt;
    }
    .product-description {
        height: 60pt;
        overflow: hidden;
        font-size: 10pt;
        line-height: 1.5;
        color: #6b7280;
        margin-bottom: 10pt;
    }
    .product-price {
        font-size: 18pt;
        font-weight: bold;
        color: #16a34a;
    }
</style>
<body>
    <div class="product-card">
        <div class="product-image-area">
            <img src="product.jpg" style="width: 100%;" />
        </div>
        <div class="product-details">
            <div class="product-title">Premium Widget</div>
            <div class="product-description">
                This is a detailed product description that might be quite
                long. The overflow: hidden property ensures the description
                area maintains a consistent height across all product cards,
                even if descriptions vary in length. Additional details...
            </div>
            <div class="product-price">$149.99</div>
        </div>
    </div>
</body>

Example 7: Dashboard panel with fixed dimensions

<style>
    .dashboard-panel {
        width: 280pt;
        height: 200pt;
        overflow: hidden;
        background-color: white;
        border: 2pt solid #e5e7eb;
        padding: 20pt;
        margin: 10pt;
        display: inline-block;
        vertical-align: top;
    }
    .panel-header {
        font-size: 16pt;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 15pt;
        padding-bottom: 10pt;
        border-bottom: 2pt solid #e5e7eb;
    }
    .panel-content {
        font-size: 11pt;
        line-height: 1.6;
    }
    .metric {
        margin-bottom: 10pt;
    }
    .metric-label {
        color: #6b7280;
        font-size: 10pt;
    }
    .metric-value {
        font-size: 24pt;
        font-weight: bold;
        color: #2563eb;
    }
</style>
<body>
    <h1>Sales Dashboard</h1>
    <div class="dashboard-panel">
        <div class="panel-header">Q4 Performance</div>
        <div class="panel-content">
            <div class="metric">
                <div class="metric-label">Total Revenue</div>
                <div class="metric-value">$487K</div>
            </div>
            <div class="metric">
                <div class="metric-label">Growth Rate</div>
                <div class="metric-value">+23%</div>
            </div>
            <div class="metric">
                <div class="metric-label">Customer Count</div>
                <div class="metric-value">1,842</div>
            </div>
        </div>
    </div>
</body>

<style>
    .newsletter-layout {
        padding: 30pt;
    }
    .sidebar {
        width: 180pt;
        float: left;
        margin-right: 20pt;
    }
    .sidebar-box {
        background-color: #fef3c7;
        border: 2pt solid #f59e0b;
        padding: 15pt;
        margin-bottom: 20pt;
        height: 120pt;
        overflow: hidden;
    }
    .sidebar-title {
        font-weight: bold;
        color: #92400e;
        margin-bottom: 10pt;
        font-size: 12pt;
    }
    .sidebar-content {
        font-size: 10pt;
        line-height: 1.5;
    }
    .main-content {
        margin-left: 220pt;
    }
</style>
<body>
    <div class="newsletter-layout">
        <div class="sidebar">
            <div class="sidebar-box">
                <div class="sidebar-title">Quick Tips</div>
                <div class="sidebar-content">
                    Here are some helpful tips for your next project. The fixed
                    height ensures consistent layout even with varying content
                    lengths. Additional tips may be clipped...
                </div>
            </div>
            <div class="sidebar-box">
                <div class="sidebar-title">Did You Know?</div>
                <div class="sidebar-content">
                    Interesting facts and information about PDF generation and
                    document layout techniques...
                </div>
            </div>
        </div>
        <div class="main-content">
            <h1>Main Article</h1>
            <p>The main content flows alongside the fixed-height sidebar boxes...</p>
        </div>
    </div>
</body>

Example 9: Testimonial cards with consistent heights

<style>
    .testimonial-grid {
        padding: 20pt;
        text-align: center;
    }
    .testimonial {
        width: 250pt;
        height: 180pt;
        display: inline-block;
        vertical-align: top;
        margin: 10pt;
        padding: 20pt;
        background-color: #f9fafb;
        border: 2pt solid #e5e7eb;
        border-radius: 8pt;
    }
    .testimonial-quote {
        height: 100pt;
        overflow: hidden;
        font-style: italic;
        font-size: 11pt;
        line-height: 1.6;
        color: #1f2937;
        margin-bottom: 15pt;
    }
    .testimonial-author {
        font-weight: bold;
        color: #2563eb;
        font-size: 12pt;
    }
    .testimonial-role {
        font-size: 10pt;
        color: #6b7280;
    }
</style>
<body>
    <h1 style="text-align: center;">Customer Testimonials</h1>
    <div class="testimonial-grid">
        <div class="testimonial">
            <div class="testimonial-quote">
                "This product has transformed our workflow completely. We've
                seen a 50% increase in productivity and our team couldn't be
                happier with the results. Highly recommended for any business!"
            </div>
            <div class="testimonial-author">Sarah Johnson</div>
            <div class="testimonial-role">CEO, TechCorp</div>
        </div>
        <div class="testimonial">
            <div class="testimonial-quote">
                "Outstanding quality and exceptional support. The best
                investment we've made this year!"
            </div>
            <div class="testimonial-author">Michael Chen</div>
            <div class="testimonial-role">Director, InnovateLab</div>
        </div>
    </div>
</body>

Example 10: Brochure section with constrained areas

<style>
    .brochure-section {
        width: 100%;
        padding: 30pt;
        background-color: #1e3a8a;
        color: white;
    }
    .feature-columns {
        display: table;
        width: 100%;
        border-collapse: separate;
        border-spacing: 20pt;
    }
    .feature-column {
        display: table-cell;
        vertical-align: top;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 20pt;
        border-radius: 8pt;
    }
    .feature-title {
        font-size: 18pt;
        font-weight: bold;
        margin-bottom: 15pt;
    }
    .feature-content {
        height: 120pt;
        overflow: hidden;
        font-size: 11pt;
        line-height: 1.6;
    }
    .feature-icon {
        width: 50pt;
        height: 50pt;
        background-color: #fbbf24;
        color: #1e3a8a;
        font-size: 24pt;
        font-weight: bold;
        text-align: center;
        line-height: 50pt;
        margin-bottom: 15pt;
        border-radius: 25pt;
    }
</style>
<body>
    <div class="brochure-section">
        <h1 style="text-align: center; margin-top: 0;">Our Services</h1>
        <div class="feature-columns">
            <div class="feature-column">
                <div class="feature-icon">1</div>
                <div class="feature-title">Consulting</div>
                <div class="feature-content">
                    Expert consulting services to help you achieve your business
                    goals. Our team brings decades of experience and proven
                    methodologies to every engagement. We work closely with you
                    to understand your unique challenges...
                </div>
            </div>
            <div class="feature-column">
                <div class="feature-icon">2</div>
                <div class="feature-title">Development</div>
                <div class="feature-content">
                    Custom development solutions tailored to your needs using
                    the latest technologies and best practices...
                </div>
            </div>
            <div class="feature-column">
                <div class="feature-icon">3</div>
                <div class="feature-title">Support</div>
                <div class="feature-content">
                    24/7 support services ensuring your systems run smoothly
                    and efficiently at all times...
                </div>
            </div>
        </div>
    </div>
</body>

Example 11: Magazine article with sidebar callouts

<style>
    .magazine-article {
        width: 600pt;
        margin: 0 auto;
        padding: 40pt;
    }
    .article-title {
        font-size: 28pt;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 20pt;
        border-bottom: 3pt solid #1e3a8a;
        padding-bottom: 10pt;
    }
    .callout-box {
        width: 220pt;
        height: 140pt;
        overflow: hidden;
        float: right;
        margin: 0 0 15pt 20pt;
        padding: 15pt;
        background-color: #dbeafe;
        border: 3pt solid #2563eb;
    }
    .callout-title {
        font-weight: bold;
        font-size: 14pt;
        color: #1e40af;
        margin-bottom: 10pt;
    }
    .callout-content {
        font-size: 10pt;
        line-height: 1.5;
    }
    .article-body {
        text-align: justify;
        line-height: 1.7;
    }
</style>
<body>
    <div class="magazine-article">
        <div class="article-title">The Evolution of Document Design</div>
        <div class="callout-box">
            <div class="callout-title">Key Insight</div>
            <div class="callout-content">
                Understanding overflow properties is crucial for creating
                professional, polished documents with consistent layouts.
                Fixed-height elements ensure visual harmony across pages.
                Additional insights that might be clipped...
            </div>
        </div>
        <div class="article-body">
            <p>Modern document design requires careful attention to layout and
            content flow. The overflow property provides essential control over
            how content behaves within constrained spaces.</p>
            <p>Professional designers use overflow to create consistent,
            predictable layouts that maintain visual integrity across different
            content lengths and document types.</p>
        </div>
    </div>
</body>

Example 12: Report summary boxes

<style>
    .report-summary {
        padding: 30pt;
    }
    .summary-grid {
        display: table;
        width: 100%;
        border-collapse: separate;
        border-spacing: 15pt;
    }
    .summary-row {
        display: table-row;
    }
    .summary-box {
        display: table-cell;
        padding: 20pt;
        background-color: #f3f4f6;
        border-left: 5pt solid #2563eb;
    }
    .summary-title {
        font-size: 14pt;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 12pt;
    }
    .summary-content {
        height: 100pt;
        overflow: hidden;
        font-size: 10pt;
        line-height: 1.6;
        color: #4b5563;
    }
    .summary-footer {
        margin-top: 10pt;
        font-size: 9pt;
        color: #6b7280;
        font-style: italic;
    }
</style>
<body>
    <div class="report-summary">
        <h1>Executive Summary</h1>
        <div class="summary-grid">
            <div class="summary-row">
                <div class="summary-box">
                    <div class="summary-title">Financial Overview</div>
                    <div class="summary-content">
                        Revenue increased by 24% year-over-year, reaching $12.5M
                        in Q4. Operating expenses remained stable while gross
                        margins improved significantly. Key drivers included
                        expanded market share and improved operational efficiency.
                        Detailed breakdown continues...
                    </div>
                    <div class="summary-footer">See page 12 for details</div>
                </div>
                <div class="summary-box">
                    <div class="summary-title">Market Analysis</div>
                    <div class="summary-content">
                        Market conditions remained favorable throughout the
                        quarter. Competitive landscape analysis shows strong
                        positioning relative to industry peers...
                    </div>
                    <div class="summary-footer">See page 18 for details</div>
                </div>
            </div>
        </div>
    </div>
</body>

Example 13: Event schedule with time-constrained entries

<style>
    .schedule {
        width: 550pt;
        margin: 20pt auto;
    }
    .schedule-entry {
        margin-bottom: 15pt;
        border: 2pt solid #e5e7eb;
        background-color: white;
        overflow: hidden;
    }
    .entry-time {
        width: 120pt;
        float: left;
        padding: 15pt;
        background-color: #1e3a8a;
        color: white;
        font-weight: bold;
        font-size: 14pt;
        text-align: center;
    }
    .entry-details {
        margin-left: 120pt;
        padding: 15pt;
        height: 80pt;
        overflow: hidden;
    }
    .entry-title {
        font-size: 14pt;
        font-weight: bold;
        color: #1e3a8a;
        margin-bottom: 8pt;
    }
    .entry-description {
        font-size: 10pt;
        line-height: 1.5;
        color: #6b7280;
    }
</style>
<body>
    <h1 style="text-align: center;">Conference Schedule</h1>
    <div class="schedule">
        <div class="schedule-entry">
            <div class="entry-time">9:00 AM</div>
            <div class="entry-details">
                <div class="entry-title">Opening Keynote</div>
                <div class="entry-description">
                    Welcome address and conference overview. Discussion of key
                    themes and objectives for the day. Introductions to featured
                    speakers and special guests. Additional information that may
                    be clipped due to space constraints...
                </div>
            </div>
        </div>
        <div class="schedule-entry">
            <div class="entry-time">10:30 AM</div>
            <div class="entry-details">
                <div class="entry-title">Technical Workshop</div>
                <div class="entry-description">
                    Hands-on session covering advanced PDF generation techniques
                    and best practices for document layout...
                </div>
            </div>
        </div>
    </div>
</body>

Example 14: Price comparison table with fixed cells

<style>
    .pricing-table {
        width: 100%;
        border-collapse: collapse;
        margin: 30pt 0;
    }
    .pricing-table th {
        padding: 15pt;
        background-color: #1f2937;
        color: white;
        font-size: 14pt;
        border: 1pt solid #374151;
    }
    .pricing-table td {
        padding: 12pt;
        border: 1pt solid #d1d5db;
        text-align: center;
    }
    .feature-cell {
        text-align: left;
        font-weight: bold;
        color: #1e3a8a;
    }
    .features-list {
        height: 100pt;
        overflow: hidden;
        text-align: left;
        font-size: 10pt;
        line-height: 1.8;
    }
    .price-highlight {
        font-size: 24pt;
        font-weight: bold;
        color: #16a34a;
    }
</style>
<body>
    <h1 style="text-align: center;">Pricing Plans</h1>
    <table class="pricing-table">
        <thead>
            <tr>
                <th style="width: 40%;">Features</th>
                <th style="width: 20%;">Basic</th>
                <th style="width: 20%;">Pro</th>
                <th style="width: 20%;">Enterprise</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="feature-cell">Monthly Price</td>
                <td><div class="price-highlight">$29</div></td>
                <td><div class="price-highlight">$79</div></td>
                <td><div class="price-highlight">$199</div></td>
            </tr>
            <tr>
                <td class="feature-cell">
                    <div class="features-list">
                        • PDF Generation<br/>
                        • Basic Templates<br/>
                        • Email Support<br/>
                        • 100 Documents/month<br/>
                        • Standard Processing<br/>
                        • Basic Analytics<br/>
                        • Single User<br/>
                        • More features...<br/>
                        • Additional items...
                    </div>
                </td>
                <td>✓</td>
                <td>✓✓</td>
                <td>✓✓✓</td>
            </tr>
        </tbody>
    </table>
</body>

Example 15: Certificate with controlled content areas

<style>
    .certificate {
        width: 700pt;
        height: 500pt;
        margin: 40pt auto;
        padding: 40pt;
        border: 10pt double #1e3a8a;
        background-color: #fffef7;
        position: relative;
    }
    .cert-border {
        width: 100%;
        height: 100%;
        border: 2pt solid #1e3a8a;
        padding: 30pt;
        overflow: hidden;
    }
    .cert-title {
        font-size: 36pt;
        font-weight: bold;
        color: #1e3a8a;
        text-align: center;
        margin-bottom: 30pt;
    }
    .cert-content {
        height: 200pt;
        overflow: hidden;
        text-align: center;
        padding: 20pt;
    }
    .recipient-name {
        font-size: 28pt;
        font-weight: bold;
        color: #1f2937;
        margin: 20pt 0;
        border-bottom: 2pt solid #1f2937;
        display: inline-block;
        padding-bottom: 5pt;
    }
    .cert-text {
        font-size: 14pt;
        line-height: 1.8;
        color: #374151;
    }
    .cert-footer {
        text-align: center;
        margin-top: 40pt;
        font-size: 11pt;
    }
</style>
<body>
    <div class="certificate">
        <div class="cert-border">
            <div class="cert-title">Certificate of Excellence</div>
            <div class="cert-content">
                <div class="cert-text">This certifies that</div>
                <div class="recipient-name">Jennifer Williams</div>
                <div class="cert-text">
                    has successfully completed the Advanced PDF Generation
                    Course with distinction, demonstrating exceptional skill
                    and understanding of document layout principles, overflow
                    management, and professional design techniques.
                </div>
            </div>
            <div class="cert-footer">
                Awarded on October 14, 2025
            </div>
        </div>
    </div>
</body>