CSS min-inline-size Property

What You’ll Learn

The min-inline-size property sets how small an element can shrink along the inline axis. In everyday horizontal layouts, that usually means setting a minimum width while still letting wider content grow naturally.

Introduction

The min-inline-size property in CSS defines the minimum size of a block-level element along the inline axis. This property is useful for ensuring elements do not shrink too narrow along the inline direction of text flow, depending on the writing mode of the document.

By specifying a minimum size, you can keep cards, panels, and sections visually balanced even when content is short, which helps maintain layout consistency across different devices and screen sizes.

Definition and Usage

In horizontal writing modes such as English, the inline axis runs left to right, so min-inline-size: 300px; usually sets a minimum width. In vertical writing modes, the same property sets a minimum height instead.

Use min-inline-size with inline-size and max-inline-size for full logical sizing control on the inline axis.

📝 Syntax

Write min-inline-size with a length, percentage, sizing keyword, or auto:

element {
  min-inline-size: auto | length | percentage | max-content | min-content | fit-content | initial | inherit;
}

Basic Example

.container {
  border: 1px solid black;
  min-inline-size: 300px;
}

Syntax Rules

• The initial value is auto, meaning no explicit minimum inline-size constraint.
• Length values such as px, rem, and vw set a fixed lower limit.
• Percentages are relative to the containing block’s inline size.
• Keywords like min-content, max-content, and fit-content set a floor based on content sizing.
• Use with inline-size and max-inline-size to define preferred and maximum inline dimensions too.

🎯 Default Value

The default value of min-inline-size is auto. Without explicit styling, the element has no minimum size constraint along the inline axis and can shrink to fit its content based on other sizing properties.

💎 Property Values

These are the most common values you will use with min-inline-size.

Min Inline Size and Writing Modes

min-inline-size follows the writing mode instead of always mapping to horizontal min-width. That is the main reason to choose it over physical properties like min-width.

• inline-size sets the preferred inline dimension; min-inline-size sets the lower limit.
• max-inline-size sets the upper limit on the same axis.
• Logical properties help components stay correct when text direction or writing mode changes.

min-inline-size vs min-width

Examples Gallery

Try min-inline-size with fixed floors, empty boxes, percentage minimums, and side-by-side comparisons.

<style>
  .container {
    border: 1px solid black;
    min-inline-size: 300px;
  }
</style>

<div class="container">
  This container will not shrink below 300px in width.
</div>

.panel {
  min-inline-size: 200px;
  padding: 1rem;
  background: #dbeafe;
}

.parent { inline-size: 480px; }
.child {
  min-inline-size: 50%;
  background: #93c5fd;
}

.auto { min-inline-size: auto; }
.sm { min-inline-size: 160px; }
.md { min-inline-size: 280px; }

💡 Best Practices