|

CSS 39 💻 overflow-block and overflow-inline media features

Bykronos

These two media features describe how a device handles content overflow — whether it scrolls, paginates, or simply clips. They’re especially relevant for paged media (like print) and e-readers.

Overview of Features

FeatureDescriptionAxis
overflow-blockOverflow handling along the block axisVertical (in horizontal writing modes)
overflow-inlineOverflow handling along the inline axisHorizontal (in horizontal writing modes)

Understanding Block and Inline Axes

Before diving in, it’s important to understand the two axes:

AxisDescriptionDefault Direction
Block axisThe direction in which block-level elements are laid outVertical (top → bottom)
Inline axisThe direction in which inline content flowsHorizontal (left → right)

Note: These axes swap in vertical writing modes (e.g., writing-mode: vertical-rl).

Block Axis (vertical)
        ↑
        │  Inline Axis (horizontal)
        │  ────────────────────────→
        │

1. overflow-block

The overflow-block media feature checks how the device handles overflow along the block axis.

@media (overflow-block: scroll) {
    div {
        color: blue;
    }
}

Values

ValueDescription
noneContent that overflows is not displayed (clipped)
scrollContent that overflows can be scrolled
optional-pagedScrolling is available, but pages can also be triggered
pagedContent is broken into discrete pages

Real-World Examples

Device / Mediumoverflow-block Value
Computer screenscroll
Smartphonescroll
Printed pagepaged
E-readerpaged or optional-paged
Text-only terminalscroll or none
Projectionnone

2. overflow-inline

The overflow-inline media feature checks how the device handles overflow along the inline axis.

@media (overflow-inline: scroll) {
    div {
        color: blue;
    }
}

Values

ValueDescription
noneOverflowing content is not displayed (clipped)
scrollOverflowing content can be scrolled to

Real-World Examples

Device / Mediumoverflow-inline Value
Computer screenscroll
Smartphonescroll (horizontal swipe)
Printed pagenone (content is clipped or wraps)
Text-only terminalscroll or none

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow-block and overflow-inline Media Features</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            background: #f8f9fa;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
            transition: background 0.3s, color 0.3s;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            transition: all 0.3s;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== OVERFLOW-BLOCK DEMO ====== */
        .overflow-block-demo {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin: 15px 0;
            transition: all 0.3s;
            background: #e9ecef;
            border: 2px solid #ddd;
        }

        /* None — clipped */
        @media (overflow-block: none) {
            .overflow-block-demo {
                background: #dc3545;
                color: white;
                border-color: #a71d2a;
            }
            .overflow-block-demo::after {
                content: " (none — content clipped)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* Scroll — scrollable */
        @media (overflow-block: scroll) {
            .overflow-block-demo {
                background: #007bff;
                color: white;
                border-color: #0056b3;
            }
            .overflow-block-demo::after {
                content: " (scroll — content scrollable)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* Optional-paged */
        @media (overflow-block: optional-paged) {
            .overflow-block-demo {
                background: #ffc107;
                color: #333;
                border-color: #d39e00;
            }
            .overflow-block-demo::after {
                content: " (optional-paged — can paginate)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* Paged */
        @media (overflow-block: paged) {
            .overflow-block-demo {
                background: #28a745;
                color: white;
                border-color: #1e7e34;
            }
            .overflow-block-demo::after {
                content: " (paged — discrete pages)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* ====== OVERFLOW-INLINE DEMO ====== */
        .overflow-inline-demo {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            margin: 15px 0;
            transition: all 0.3s;
            background: #e9ecef;
            border: 2px solid #ddd;
        }

        @media (overflow-inline: none) {
            .overflow-inline-demo {
                background: #dc3545;
                color: white;
                border-color: #a71d2a;
            }
            .overflow-inline-demo::after {
                content: " (none — inline overflow clipped)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        @media (overflow-inline: scroll) {
            .overflow-inline-demo {
                background: #007bff;
                color: white;
                border-color: #0056b3;
            }
            .overflow-inline-demo::after {
                content: " (scroll — inline overflow scrollable)";
                font-weight: normal;
                font-size: 0.85rem;
            }
        }

        /* ====== AXIS VISUALIZATION ====== */
        .axis-viz {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin: 20px 0;
        }

        .axis-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .axis-label {
            font-weight: bold;
            color: #007bff;
            min-width: 120px;
            text-align: right;
        }

        .axis-arrow {
            font-size: 1.5rem;
            color: #dc3545;
        }

        .axis-description {
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* ====== PRACTICAL: PAGED MEDIA ====== */
        .article {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border: 2px solid #ddd;
            border-radius: 8px;
        }

        .article h3 {
            color: #007bff;
            margin-top: 0;
        }

        .article p {
            text-align: justify;
            line-height: 1.8;
        }

        /* Print / paged media styles */
        @media (overflow-block: paged) {
            .article {
                border: none;
                padding: 0;
                background: transparent;
            }
            .article h3 {
                color: #000;
                page-break-after: avoid;
            }
            .article p {
                orphans: 3;
                widows: 3;
            }
            .no-print {
                display: none;
            }
        }

        /* Scrollable media styles */
        @media (overflow-block: scroll) {
            .article {
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
        }

        /* ====== CONTENT OVERFLOW DEMO ====== */
        .overflow-container {
            width: 100%;
            max-width: 600px;
            margin: 15px auto;
            border: 2px dashed #007bff;
            border-radius: 8px;
            overflow: auto;
            padding: 15px;
            background: #f8f9fa;
        }

        .overflow-container .long-content {
            white-space: nowrap;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: #333;
        }

        /* Inline overflow behavior */
        @media (overflow-inline: scroll) {
            .overflow-container {
                overflow-x: auto;
            }
        }

        @media (overflow-inline: none) {
            .overflow-container {
                overflow-x: hidden;
            }
        }

        /* ====== DETECTION CARDS ====== */
        .detection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .detection-card {
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 2px solid #ddd;
            background: #f8f9fa;
            transition: all 0.3s;
        }

        .detection-card .label {
            font-size: 0.85rem;
            color: #666;
            display: block;
            margin-bottom: 5px;
        }

        .detection-card .value {
            font-size: 1.1rem;
            font-weight: bold;
            color: #007bff;
        }

        /* ====== LIVE INDICATOR ====== */
        .live-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #007bff;
            color: white;
            padding: 12px 20px;
            border-radius: 50px;
            font-weight: bold;
            font-size: 0.85rem;
            box-shadow: 0 4px 15px rgba(0,123,255,0.4);
            z-index: 1000;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .live-indicator .detail {
            font-size: 0.75rem;
            opacity: 0.9;
        }

        /* ====== PRINT STYLES ====== */
        @media print {
            body {
                background: white;
                color: black;
                padding: 0;
            }
            section {
                box-shadow: none;
                border: 1px solid #ccc;
                page-break-inside: avoid;
            }
            .code-block {
                background: #f4f4f4;
                color: #333;
                border: 1px solid #ddd;
            }
            .no-print {
                display: none;
            }
            .live-indicator {
                display: none;
            }
        }
    </style>
</head>
<body>

    <h1>overflow-block and overflow-inline Media Features</h1>

    <!-- ====== 1. OVERFLOW-BLOCK DEMO ====== -->
    <section>
        <h2>1. overflow-block</h2>
        <p>Checks how the device handles overflow along the <strong>block axis</strong> (vertical in horizontal writing modes).</p>

        <div class="overflow-block-demo">
            Block Axis Overflow
        </div>

        <div class="axis-viz">
            <div class="axis-row">
                <span class="axis-label">Block Axis:</span>
                <span class="axis-arrow">↕</span>
                <span class="axis-description">Vertical (top → bottom)</span>
            </div>
        </div>

        <div class="code-block">
            /* Content is clipped */
            @media (overflow-block: none) {
                div { color: red; }
            }

            /* Content can be scrolled */
            @media (overflow-block: scroll) {
                div { color: blue; }
            }

            /* Can paginate or scroll */
            @media (overflow-block: optional-paged) {
                div { color: orange; }
            }

            /* Content is broken into pages */
            @media (overflow-block: paged) {
                div { color: green; }
            }
        </div>

        <p class="note"><strong>Try it:</strong> Print this page to see <code>overflow-block: paged</code> in action!</p>
    </section>

    <!-- ====== 2. OVERFLOW-INLINE DEMO ====== -->
    <section>
        <h2>2. overflow-inline</h2>
        <p>Checks how the device handles overflow along the <strong>inline axis</strong> (horizontal in horizontal writing modes).</p>

        <div class="overflow-inline-demo">
            Inline Axis Overflow
        </div>

        <div class="axis-viz">
            <div class="axis-row">
                <span class="axis-label">Inline Axis:</span>
                <span class="axis-arrow">↔</span>
                <span class="axis-description">Horizontal (left → right)</span>
            </div>
        </div>

        <div class="code-block">
            /* Inline overflow is clipped */
            @media (overflow-inline: none) {
                div { color: blue; }
            }

            /* Inline overflow can be scrolled */
            @media (overflow-inline: scroll) {
                div { color: blue; }
            }
        </div>
    </section>

    <!-- ====== 3. CONTENT OVERFLOW DEMO ====== -->
    <section>
        <h2>3. Content Overflow Demo</h2>
        <p>This container demonstrates inline overflow behavior.</p>

        <div class="overflow-container">
            <div class="long-content">
                This is a very long line of text that will overflow the container if it's too wide. On devices with <code>overflow-inline: scroll</code>, you can scroll horizontally to see the rest. On devices with <code>overflow-inline: none</code>, the text is clipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>

        <div class="code-block">
            .overflow-container {
                overflow: auto; /* Handles both axes */
            }

            /* Inline overflow behavior */
            @media (overflow-inline: scroll) {
                .overflow-container {
                    overflow-x: auto; /* Horizontal scroll */
                }
            }

            @media (overflow-inline: none) {
                .overflow-container {
                    overflow-x: hidden; /* Clip */
                }
            }
        </div>
    </section>

    <!-- ====== 4. PRACTICAL: PAGED MEDIA ====== -->
    <section class="no-print">
        <h2>4. Practical Example: Paged Media Styles</h2>
        <p>This article uses <code>overflow-block</code> to adapt to paged media.</p>
    </section>

    <div class="article">
        <h3>📄 Sample Article</h3>
        <p>
            This article demonstrates how to adapt styles for different overflow behaviors.
            On a screen (with <code>overflow-block: scroll</code>), it has a shadow and border.
            When printed (with <code>overflow-block: paged</code>), it becomes clean and borderless,
            with proper page-break controls.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="no-print" style="color: #6c757d; font-style: italic;">
            (This paragraph is hidden when printed.)
        </p>
    </div>

    <div class="code-block no-print">
        /* Paged media styles */
        @media (overflow-block: paged) {
            .article {
                border: none;
                padding: 0;
                background: transparent;
            }
            .article h3 {
                page-break-after: avoid;
            }
            .article p {
                orphans: 3;
                widows: 3;
            }
            .no-print {
                display: none;
            }
        }

        /* Scrollable media styles */
        @media (overflow-block: scroll) {
            .article {
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
        }
    </div>

    <!-- ====== 5. DETECTION SUMMARY ====== -->
    <section>
        <h2>5. Your Device's Overflow Handling</h2>
        <p>Below is a live detection of your device's overflow capabilities.</p>

        <div class="detection-grid">
            <div class="detection-card" id="ob-none">
                <span class="label">overflow-block: none</span>
                <span class="value" id="ob-none-value">Detecting...</span>
            </div>
            <div class="detection-card" id="ob-scroll">
                <span class="label">overflow-block: scroll</span>
                <span class="value" id="ob-scroll-value">Detecting...</span>
            </div>
            <div class="detection-card" id="ob-paged">
                <span class="label">overflow-block: paged</span>
                <span class="value" id="ob-paged-value">Detecting...</span>
            </div>
            <div class="detection-card" id="ob-optional-paged">
                <span class="label">overflow-block: optional-paged</span>
                <span class="value" id="ob-optional-paged-value">Detecting...</span>
            </div>
            <div class="detection-card" id="oi-none">
                <span class="label">overflow-inline: none</span>
                <span class="value" id="oi-none-value">Detecting...</span>
            </div>
            <div class="detection-card" id="oi-scroll">
                <span class="label">overflow-inline: scroll</span>
                <span class="value" id="oi-scroll-value">Detecting...</span>
            </div>
        </div>

        <div class="code-block">
            /* Detect overflow-block */
            @media (overflow-block: none) { /* Clipped */ }
            @media (overflow-block: scroll) { /* Scrollable */ }
            @media (overflow-block: optional-paged) { /* Scroll or paginate */ }
            @media (overflow-block: paged) { /* Paginated */ }

            /* Detect overflow-inline */
            @media (overflow-inline: none) { /* Clipped */ }
            @media (overflow-inline: scroll) { /* Scrollable */ }
        </div>
    </section>

    <!-- ====== 6. REFERENCE TABLES ====== -->
    <section>
        <h2>6. Reference Tables</h2>

        <h3>overflow-block Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Device Example</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Overflowing content is clipped</td>
                <td>Projection, some terminals</td>
            </tr>
            <tr>
                <td><code>scroll</code></td>
                <td>Content can be scrolled</td>
                <td>Computer screens, phones</td>
            </tr>
            <tr>
                <td><code>optional-paged</code></td>
                <td>Can scroll or paginate</td>
                <td>Some e-readers</td>
            </tr>
            <tr>
                <td><code>paged</code></td>
                <td>Content is broken into pages</td>
                <td>Print, e-readers</td>
            </tr>
        </table>

        <h3>overflow-inline Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Device Example</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Overflowing content is clipped</td>
                <td>Print, some terminals</td>
            </tr>
            <tr>
                <td><code>scroll</code></td>
                <td>Content can be scrolled horizontally</td>
                <td>Computer screens, phones</td>
            </tr>
        </table>

        <h3>Block vs Inline Axis</h3>
        <table class="reference-table">
            <tr>
                <th>Axis</th>
                <th>Description</th>
                <th>Default Direction</th>
            </tr>
            <tr>
                <td><strong>Block axis</strong></td>
                <td>Direction of block-level layout</td>
                <td>Vertical (top → bottom)</td>
            </tr>
            <tr>
                <td><strong>Inline axis</strong></td>
                <td>Direction of inline content flow</td>
                <td>Horizontal (left → right)</td>
            </tr>
        </table>

        <h3>Device Detection Summary</h3>
        <table class="reference-table">
            <tr>
                <th>Device</th>
                <th>overflow-block</th>
                <th>overflow-inline</th>
            </tr>
            <tr>
                <td>Computer screen</td>
                <td><code>scroll</code></td>
                <td><code>scroll</code></td>
            </tr>
            <tr>
                <td>Smartphone</td>
                <td><code>scroll</code></td>
                <td><code>scroll</code></td>
            </tr>
            <tr>
                <td>Printed page</td>
                <td><code>paged</code></td>
                <td><code>none</code></td>
            </tr>
            <tr>
                <td>E-reader</td>
                <td><code>paged</code></td>
                <td><code>none</code></td>
            </tr>
            <tr>
                <td>Text terminal</td>
                <td><code>scroll</code></td>
                <td><code>scroll</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 7. BEST PRACTICES ====== -->
    <section>
        <h2>7. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>overflow-block</code> to adapt styles for paged media (print, e-readers)</li>
                <li>Use <code>overflow-inline</code> to handle horizontal overflow on different devices</li>
                <li>Provide print-friendly styles with <code>overflow-block: paged</code></li>
                <li>Use <code>orphans</code> and <code>widows</code> for paged media</li>
                <li>Test your print styles with the browser's print preview</li>
                <li>Hide non-essential elements (like navigation) in paged media</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't rely on <code>overflow-block</code> for critical functionality — it's for enhancements</li>
                <li>Don't forget that axes swap in vertical writing modes</li>
                <li>Don't assume all devices support the same overflow behavior</li>
                <li>Don't use <code>overflow-inline: none</code> for essential content</li>
                <li>Don't ignore paged media — many users print web pages</li>
            </ul>
        </div>
    </section>

    <!-- ====== LIVE INDICATOR ====== -->
    <div class="live-indicator no-print" id="live-indicator">
        <span id="indicator-block">Block: —</span>
        <span class="detail" id="indicator-inline">Inline: —</span>
    </div>

    <!-- ====== SCRIPT FOR DETECTION ====== -->
    <script>
        function updateIndicators() {
            // overflow-block detection
            const obNone = document.getElementById('ob-none');
            const obScroll = document.getElementById('ob-scroll');
            const obPaged = document.getElementById('ob-paged');
            const obOptionalPaged = document.getElementById('ob-optional-paged');

            const isObNone = window.matchMedia('(overflow-block: none)').matches;
            const isObScroll = window.matchMedia('(overflow-block: scroll)').matches;
            const isObPaged = window.matchMedia('(overflow-block: paged)').matches;
            const isObOptionalPaged = window.matchMedia('(overflow-block: optional-paged)').matches;

            function setCard(card, isActive, activeText, inactiveText) {
                const value = card.querySelector('.value');
                if (isActive) {
                    value.textContent = activeText;
                    card.style.background = '#d4edda';
                    card.style.borderColor = '#28a745';
                    value.style.color = '#28a745';
                } else {
                    value.textContent = inactiveText;
                    card.style.background = '#e9ecef';
                    card.style.borderColor = '#6c757d';
                    value.style.color = '#6c757d';
                }
            }

            setCard(obNone, isObNone, 'Active ✅', 'Not active');
            setCard(obScroll, isObScroll, 'Active ✅', 'Not active');
            setCard(obPaged, isObPaged, 'Active ✅', 'Not active');
            setCard(obOptionalPaged, isObOptionalPaged, 'Active ✅', 'Not active');

            // overflow-inline detection
            const oiNone = document.getElementById('oi-none');
            const oiScroll = document.getElementById('oi-scroll');

            const isOiNone = window.matchMedia('(overflow-inline: none)').matches;
            const isOiScroll = window.matchMedia('(overflow-inline: scroll)').matches;

            setCard(oiNone, isOiNone, 'Active ✅', 'Not active');
            setCard(oiScroll, isOiScroll, 'Active ✅', 'Not active');

            // Live indicator
            const indicatorBlock = document.getElementById('indicator-block');
            const indicatorInline = document.getElementById('indicator-inline');
            const indicator = document.getElementById('live-indicator');

            let blockValue = 'unknown';
            if (isObScroll) blockValue = 'scroll';
            else if (isObPaged) blockValue = 'paged';
            else if (isObOptionalPaged) blockValue = 'optional-paged';
            else if (isObNone) blockValue = 'none';

            let inlineValue = 'unknown';
            if (isOiScroll) inlineValue = 'scroll';
            else if (isOiNone) inlineValue = 'none';

            indicatorBlock.textContent = '📄 Block: ' + blockValue;
            indicatorInline.textContent = '↔️ Inline: ' + inlineValue;

            // Color the indicator
            if (blockValue === 'paged' || blockValue === 'optional-paged') {
                indicator.style.background = '#28a745';
                indicator.style.color = 'white';
            } else if (blockValue === 'scroll') {
                indicator.style.background = '#007bff';
                indicator.style.color = 'white';
            } else {
                indicator.style.background = '#dc3545';
                indicator.style.color = 'white';
            }
        }

        window.addEventListener('load', updateIndicators);

        // Listen for print changes (when print preview is opened)
        window.addEventListener('beforeprint', function() {
            // Print media queries become active
            setTimeout(updateIndicators, 100);
        });

        window.addEventListener('afterprint', function() {
            setTimeout(updateIndicators, 100);
        });

        updateIndicators();
    </script>

</body>
</html>

Quick Reference

FeatureDescriptionAxis
overflow-blockOverflow handling on block axisVertical (default)
overflow-inlineOverflow handling on inline axisHorizontal (default)

overflow-block Values

ValueDescriptionDevice Example
noneContent is clippedProjection, some terminals
scrollContent can be scrolledComputer screens, phones
optional-pagedCan scroll or paginateSome e-readers
pagedContent is broken into pagesPrint, e-readers

overflow-inline Values

ValueDescriptionDevice Example
noneContent is clippedPrint, some terminals
scrollContent can be scrolled horizontallyComputer screens, phones

Block vs Inline Axis

AxisDescriptionDefault Direction
Block axisDirection of block-level layoutVertical (top → bottom)
Inline axisDirection of inline content flowHorizontal (left → right)

Best Practices

✅ Do This:

/* Print-friendly styles */
@media (overflow-block: paged) {
    .article {
        border: none;
        padding: 0;
    }
    .article p {
        orphans: 3;
        widows: 3;
    }
    .no-print {
        display: none;
    }
}

/* Screen-friendly styles */
@media (overflow-block: scroll) {
    .article {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
}

/* Handle inline overflow */
@media (overflow-inline: scroll) {
    .container {
        overflow-x: auto;
    }
}

❌ Don’t Do This:

/* Don't rely on overflow-block for critical functionality */
@media (overflow-block: paged) {
    /* This is fine for enhancements, but don't hide essential content */
}

/* Don't forget that axes swap in vertical writing modes */
@media (overflow-block: scroll) {
    /* In vertical-rl, this now refers to horizontal scrolling */
}

/* Don't ignore print styles */
/* Many users still print web pages! */

Pro Tip: overflow-block and overflow-inline are most useful for paged media (print, e-readers). Use overflow-block: paged to provide clean, print-friendly styles — remove shadows, borders, and non-essential elements, and use orphans/widows to control page breaks. Remember that the block and inline axes swap in vertical writing modes (like writing-mode: vertical-rl), so these features adapt automatically to the writing direction!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!