CSS min-inline-size Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The min-inline-size property defines the smallest allowed size of an element in the inline direction — that is, the minimum distance an element must occupy along the line in which text flows for its current writing mode. Because it is a logical property, its effect follows the document’s writing mode and direction: in horizontal left-to-right contexts it behaves like a minimum inline width, while in vertical writing modes it constrains the element’s vertical measurement. It is intended to prevent elements from collapsing or becoming smaller than a usable size, regardless of their content, children, or other size constraints.

During layout, min-inline-size participates in the browser’s constraint resolution algorithm as a lower bound on the element’s used inline-size. The used inline-size will be the result of resolving intrinsic sizes, explicit size properties such as width, and min/max constraints; if that resolution would produce an inline-size smaller than the minimum, the minimum wins and forces the element to be larger. Percentages on min-inline-size resolve against the containing block’s inline-size as defined by the current writing-mode, so responsive effects cascade from the parent’s inline dimension. When both a minimum and a maximum are specified (for example with max-inline-size), the browser clamps the final used inline-size between those bounds.

In practical use, min-inline-size is useful for keeping UI controls, cards, and images legible and clickable at small sizes and for avoiding unwanted collapsing in flexible layouts. In flex and grid containers it interacts with the layout algorithm to limit how much an item can shrink, and can therefore affect distribution of free space and overflow behavior. It is complementary to properties that set absolute or preferred sizes — for example, an explicit width may be overridden by the computed minimum if the width is smaller than the min, while min-width is the physical-direction counterpart used when you need a minimum in content’s physical inline axis. Use min-inline-size when you want a writing-mode-agnostic minimum constraint that adapts correctly across horizontal and vertical layouts.

Definition

Initial value: 0
Applies to: same as width and height
Inherited: no
Computed value: same as min-width and min-height
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.minInlineSize

Interactive Demo

min-inline-size: 200px;
writing-mode: horizontal-tb;

min-inline-size: 200px;
writing-mode: vertical-rl;

min-inline-size: 20px;
writing-mode: horizontal-tb;

min-inline-size: 75%;
writing-mode: vertical-lr;

This is a box where you can change the min-inline-size.

Syntax

min-inline-size: <min-width>

Values

<min-width>Defines the min-block-size as an value or percentage.

Example

HTML

<div class="wrapper">

  <h2>min-inline-size examples</h2>



  <div class="row">

    <div class="box normal">

      <p>Default writing mode (horizontal). The box has min-inline-size: 220px.</p>

    </div>



    <div class="box parent-narrow">

      <div class="box constrained">

        <p>Nested inside a narrow parent; min-inline-size prevents it from getting too small.</p>

      </div>

    </div>

  </div>



  <div class="row">

    <div class="box vertical">

      <p>Vertical writing mode. Here min-inline-size affects the vertical dimension.</p>

    </div>

  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 20px;
  background: #f7f7fb;
  color: #101018;
}

.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.box {
  background: #fff;
  border: 1px solid #e6e9f2;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 16, 24, 0.04);
}

.box.normal {
  min-inline-size: 220px; /* at least 220px along the inline axis (width in horizontal writing mode) */
}

.box.parent-narrow {
  inline-size: 80px; /* narrow parent to show how min-inline-size of child behaves */
  overflow: visible;
}

.box.constrained {
  min-inline-size: 180px;
  background: linear-gradient(90deg, #fff, #f8fbff);
  padding: 14px;
}

.box.vertical {
  writing-mode: vertical-rl;
  min-inline-size: 6rem; /* in vertical writing mode this sets a minimum along the inline axis (vertical) */
  inline-size: 120px;
  background: linear-gradient(180deg, #fff, #fff9fb);
}

p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #202030;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS min-inline-size property. Hover over a browser icon to see the version that first introduced support for this CSS property.