CSS min-inline-size Property

This property defines the minimum horizontal or vertical size of an element depending on its writing mode.

selector { min-inline-size: value; }

<length>	Defines a fixed minimum size using units like px, em, rem, or vh.
<percentage>	Defines the minimum size as a percentage of the containing block's inline size.
auto	The default value that lets the browser calculate the minimum size based on context.
max-content	The intrinsic preferred size based on the content without wrapping.
min-content	The smallest intrinsic size possible without causing overflow.
fit-content()	Uses the fit-content formula with the specified length or percentage as a maximum.

Code Examples

A basic example showing how min-inline-size acts like min-width in a standard horizontal layout.

<div style="writing-mode: horizontal-tb; border: 2px solid #333333; min-inline-size: 300px; padding: 10px;">
  This box will never shrink below 300px wide because we are in a horizontal writing mode.
</div>

An advanced example using vertical writing mode and JavaScript to dynamically change the minimum size.

<section id="app_card" style="writing-mode: vertical-rl; border: 2px solid #ff0000; min-inline-size: 200px; padding: 10px;">
  <p>In vertical mode, this property controls the minimum height.</p>
  <button onclick="toggleSize()">Toggle Min Size</button>
</section>

<script>
function toggleSize() {
  const card = document.getElementById("app_card");
  if (card.style.minInlineSize === "400px") {
    card.style.minInlineSize = "200px";
  } else {
    card.style.minInlineSize = "400px";
  }
}
</script>

Pro Tip

You can use min-inline-size: max-content to prevent a navigation link or button from ever wrapping its text onto a second line. This forces the element to stay at least as wide as the text inside it, keeping your UI clean regardless of the container's flexibility.

Deep Dive

Think of min-inline-size as the floor of a room. No matter how much you try to squeeze the walls together, the floor prevents the space from getting narrower than a certain point so your furniture doesn't get crushed. In a standard horizontal writing mode like English, this property maps directly to min-width. However, if you switch to a vertical writing mode, it automatically maps to min-height. This is part of the Logical Properties specification, which allows developers to create layouts that adapt to different languages and text orientations without having to constantly swap between width and height rules.

Best Practices

Use min-inline-size instead of min-width when you are building layouts meant for global audiences. It ensures your components remain sturdy if the writing direction changes. Use relative units like rem or ch for the value so the minimum size scales appropriately if a user changes their browser's default font size.

Common Pitfalls

The most common confusion is forgetting that 'inline' refers to the direction text flows. If your writing-mode is vertical, min-inline-size will control the height, not the width. Also, if you explicitly set the 'width' property to a value smaller than min-inline-size, the min-inline-size value will win the priority battle and dictate the size.

Accessibility

Setting a minimum inline size ensures that content remains readable and interactive. Without it, containers might shrink so small that text overlaps or buttons become too tiny to click. This is especially important for users with low vision who might zoom in or increase text size, which can cause layout shifts if the container isn't protected by a minimum size.

Dev Data Table: min-inline-size property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.minInlineSize = "250px";
js_syntax_2	element.style.setProperty("min-inline-size", "250px");
js_note	In JavaScript, use the camelCase version minInlineSize or use the setProperty method with the original kebab-case string.
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }