max-inline-size

基线广泛可用 *

自 2020年1月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

CSS 属性 max-inline-size 根据元素的书写模式定义了元素区块的横向或纵向最大尺寸。根据 writing-mode 的值，此属性对应于 max-width 或 max-height 属性。

若为纵向书写模式，则 max-inline-size 的值对应于元素的最大高度；否则对应于元素的最大宽度。与此相关的属性为 max-block-size，此属性定义了元素另一方向的尺度。

本文内容

尝试一下

max-inline-size: 150px;
writing-mode: horizontal-tb;

max-inline-size: 150px;
writing-mode: vertical-rl;

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the max-inline-size.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: #ffffff;
}

语法

css
/* <length> 值 */
max-inline-size: 300px;
max-inline-size: 25em;

/* <percentage> 值 */
max-inline-size: 75%;

/* 关键词值 */
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content(20em);

/* 全局值 */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: revert;
max-inline-size: revert-layer;
max-inline-size: unset;

取值

max-inline-size 属性的取值与 max-width 和 max-height 属性相同。

形式定义

初始值适用元素是否是继承属性Percentages计算值动画类型

none

same as width and height

否

inline-size of containing block

same as max-width and max-height

a length, percentage or calc();

max-inline-size =
<'max-width'>

<max-width> =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
此语法反映了基于 CSS Anchor Positioning Module Level 1, CSS Box Sizing Module Level 3, CSS Box Sizing Module Level 4, CSS Logical Properties and Values Module Level 1, CSS Values and Units Module Level 4, CSS Values and Units Module Level 5 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

以像素为单位设置最大行向尺寸

HTML

html

CSS

css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}

结果

规范

CSS Logical Properties and Values Module Level 1
# propdef-max-inline-size

CSS Box Sizing Module Level 4
# sizing-values

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

对应的实体属性：max-width 和 max-height
writing-mode

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年11月3日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题