CSS min-inline-size Property

Definition and Usage

The min-inline-size property sets the minimum size of an element along the inline axis. In a horizontal writing mode it behaves like min-width. In a vertical writing mode it behaves like min-height.

It is not inherited. The initial value is 0. Pair it with max-inline-size for a cap, and with min-block-size for the other axis. Content can still make the box grow past the minimum.

CSS Syntax

Values match min-width / min-height. Newer keywords like stretch have limited support.

Property Values

How to Use min-inline-size

Think in writing-mode terms: set a floor on the inline axis, not “always left–right.”

1. Use min-inline-size where you would reach for min-width in a horizontal layout.
2. Pick 0, a length, or a percentage of the containing block.
3. Add inline-size / max-inline-size when you also need a preferred size or a cap.
4. Test with writing-mode if the page may switch to vertical text.

Live Preview

Change min-inline-size on a short label. In the default horizontal mode, this acts like min-width. Longer content can still grow past the floor.

CSS Examples

Each snippet focuses on min-inline-size. Use Try It Yourself for a live editor.

<style>
  div {
    min-inline-size: 200px;
  }
</style>

<div>Hi</div>

<style>
  .parent {
    inline-size: 320px;
  }

  .child {
    min-inline-size: 50%;
  }
</style>

<div class="parent">
  <div class="child">At least half</div>
</div>

<style>
  div {
    writing-mode: vertical-rl;
    min-inline-size: 120px;
  }
</style>

<div>Hi</div>

Key Takeaways