Max Inline Size

Set an element's maximum logical inline size.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

max-xs-0
max-inline-size: 0;
max-xs-1
max-inline-size: .25rem;
max-xs-2
max-inline-size: .5rem;
max-xs-3
max-inline-size: .75rem;
max-xs-4
max-inline-size: 1rem;
max-xs-5
max-inline-size: 1.25rem;
max-xs-6
max-inline-size: 1.5rem;
max-xs-7
max-inline-size: 1.75rem;
max-xs-8
max-inline-size: 2rem;
max-xs-9
max-inline-size: 2.25rem;
max-xs-10
max-inline-size: 2.5rem;
max-xs-11
max-inline-size: 2.75rem;
max-xs-12
max-inline-size: 3rem;
max-xs-13
max-inline-size: 3.25rem;
max-xs-14
max-inline-size: 3.5rem;
max-xs-15
max-inline-size: 3.75rem;
max-xs-16
max-inline-size: 4rem;
max-xs-17
max-inline-size: 4.25rem;
max-xs-18
max-inline-size: 4.5rem;
max-xs-19
max-inline-size: 4.75rem;
max-xs-20
max-inline-size: 5rem;
max-xs-21
max-inline-size: 5.25rem;
max-xs-22
max-inline-size: 5.5rem;
max-xs-23
max-inline-size: 5.75rem;
max-xs-24
max-inline-size: 6rem;
max-xs-25
max-inline-size: 6.25rem;
max-xs-26
max-inline-size: 6.5rem;
max-xs-27
max-inline-size: 6.75rem;
max-xs-28
max-inline-size: 7rem;
max-xs-29
max-inline-size: 7.25rem;
max-xs-30
max-inline-size: 7.5rem;
max-xs-31
max-inline-size: 7.75rem;
max-xs-32
max-inline-size: 8rem;
max-xs-33
max-inline-size: 8.25rem;
max-xs-34
max-inline-size: 8.5rem;
max-xs-35
max-inline-size: 8.75rem;
max-xs-36
max-inline-size: 9rem;
max-xs-37
max-inline-size: 9.25rem;
max-xs-38
max-inline-size: 9.5rem;
max-xs-39
max-inline-size: 9.75rem;
max-xs-40
max-inline-size: 10rem;
max-xs-41
max-inline-size: 10.25rem;
max-xs-42
max-inline-size: 10.5rem;
max-xs-43
max-inline-size: 10.75rem;
max-xs-44
max-inline-size: 11rem;
max-xs-45
max-inline-size: 11.25rem;
max-xs-46
max-inline-size: 11.5rem;
max-xs-47
max-inline-size: 11.75rem;
max-xs-48
max-inline-size: 12rem;
max-xs-49
max-inline-size: 12.25rem;
max-xs-50
max-inline-size: 12.5rem;
max-xs-51
max-inline-size: 12.75rem;
max-xs-52
max-inline-size: 13rem;
max-xs-53
max-inline-size: 13.25rem;
max-xs-54
max-inline-size: 13.5rem;
max-xs-55
max-inline-size: 13.75rem;
max-xs-56
max-inline-size: 14rem;
max-xs-57
max-inline-size: 14.25rem;
max-xs-58
max-inline-size: 14.5rem;
max-xs-59
max-inline-size: 14.75rem;
max-xs-60
max-inline-size: 15rem;
max-xs-61
max-inline-size: 15.25rem;
max-xs-62
max-inline-size: 15.5rem;
max-xs-63
max-inline-size: 15.75rem;
max-xs-64
max-inline-size: 16rem;
max-xs-65
max-inline-size: 16.25rem;
max-xs-66
max-inline-size: 16.5rem;
max-xs-67
max-inline-size: 16.75rem;
max-xs-68
max-inline-size: 17rem;
max-xs-69
max-inline-size: 17.25rem;
max-xs-70
max-inline-size: 17.5rem;
max-xs-71
max-inline-size: 17.75rem;
max-xs-72
max-inline-size: 18rem;
max-xs-73
max-inline-size: 18.25rem;
max-xs-74
max-inline-size: 18.5rem;
max-xs-75
max-inline-size: 18.75rem;
max-xs-76
max-inline-size: 19rem;
max-xs-77
max-inline-size: 19.25rem;
max-xs-78
max-inline-size: 19.5rem;
max-xs-79
max-inline-size: 19.75rem;
max-xs-80
max-inline-size: 20rem;
max-xs-81
max-inline-size: 20.25rem;
max-xs-82
max-inline-size: 20.5rem;
max-xs-83
max-inline-size: 20.75rem;
max-xs-84
max-inline-size: 21rem;
max-xs-85
max-inline-size: 21.25rem;
max-xs-86
max-inline-size: 21.5rem;
max-xs-87
max-inline-size: 21.75rem;
max-xs-88
max-inline-size: 22rem;
max-xs-89
max-inline-size: 22.25rem;
max-xs-90
max-inline-size: 22.5rem;
max-xs-91
max-inline-size: 22.75rem;
max-xs-92
max-inline-size: 23rem;
max-xs-93
max-inline-size: 23.25rem;
max-xs-94
max-inline-size: 23.5rem;
max-xs-95
max-inline-size: 23.75rem;
max-xs-96
max-inline-size: 24rem;
max-xs-97
max-inline-size: 24.25rem;
max-xs-98
max-inline-size: 24.5rem;
max-xs-99
max-inline-size: 24.75rem;
max-xs-100
max-inline-size: 25rem;
max-xs-101
max-inline-size: 25.25rem;
max-xs-102
max-inline-size: 25.5rem;
max-xs-103
max-inline-size: 25.75rem;
max-xs-104
max-inline-size: 26rem;
max-xs-105
max-inline-size: 26.25rem;
max-xs-106
max-inline-size: 26.5rem;
max-xs-107
max-inline-size: 26.75rem;
max-xs-108
max-inline-size: 27rem;
max-xs-109
max-inline-size: 27.25rem;
max-xs-110
max-inline-size: 27.5rem;
max-xs-111
max-inline-size: 27.75rem;
max-xs-112
max-inline-size: 28rem;
max-xs-113
max-inline-size: 28.25rem;
max-xs-114
max-inline-size: 28.5rem;
max-xs-115
max-inline-size: 28.75rem;
max-xs-116
max-inline-size: 29rem;
max-xs-117
max-inline-size: 29.25rem;
max-xs-118
max-inline-size: 29.5rem;
max-xs-119
max-inline-size: 29.75rem;
max-xs-120
max-inline-size: 30rem;
max-xs-121
max-inline-size: 30.25rem;
max-xs-122
max-inline-size: 30.5rem;
max-xs-123
max-inline-size: 30.75rem;
max-xs-124
max-inline-size: 31rem;
max-xs-125
max-inline-size: 31.25rem;
max-xs-126
max-inline-size: 31.5rem;
max-xs-127
max-inline-size: 31.75rem;
max-xs-128
max-inline-size: 32rem;
max-xs-129
max-inline-size: 32.25rem;
max-xs-130
max-inline-size: 32.5rem;
max-xs-131
max-inline-size: 32.75rem;
max-xs-132
max-inline-size: 33rem;
max-xs-133
max-inline-size: 33.25rem;
max-xs-134
max-inline-size: 33.5rem;
max-xs-135
max-inline-size: 33.75rem;
max-xs-136
max-inline-size: 34rem;
max-xs-137
max-inline-size: 34.25rem;
max-xs-138
max-inline-size: 34.5rem;
max-xs-139
max-inline-size: 34.75rem;
max-xs-140
max-inline-size: 35rem;
max-xs-141
max-inline-size: 35.25rem;
max-xs-142
max-inline-size: 35.5rem;
max-xs-143
max-inline-size: 35.75rem;
max-xs-144
max-inline-size: 36rem;
max-xs-145
max-inline-size: 36.25rem;
max-xs-146
max-inline-size: 36.5rem;
max-xs-147
max-inline-size: 36.75rem;
max-xs-148
max-inline-size: 37rem;
max-xs-149
max-inline-size: 37.25rem;
max-xs-150
max-inline-size: 37.5rem;
max-xs-151
max-inline-size: 37.75rem;
max-xs-152
max-inline-size: 38rem;
max-xs-153
max-inline-size: 38.25rem;
max-xs-154
max-inline-size: 38.5rem;
max-xs-155
max-inline-size: 38.75rem;
max-xs-156
max-inline-size: 39rem;
max-xs-157
max-inline-size: 39.25rem;
max-xs-158
max-inline-size: 39.5rem;
max-xs-159
max-inline-size: 39.75rem;
max-xs-160
max-inline-size: 40rem;
max-xs-161
max-inline-size: 40.25rem;
max-xs-162
max-inline-size: 40.5rem;
max-xs-163
max-inline-size: 40.75rem;
max-xs-164
max-inline-size: 41rem;
max-xs-165
max-inline-size: 41.25rem;
max-xs-166
max-inline-size: 41.5rem;
max-xs-167
max-inline-size: 41.75rem;
max-xs-168
max-inline-size: 42rem;
max-xs-169
max-inline-size: 42.25rem;
max-xs-170
max-inline-size: 42.5rem;
max-xs-171
max-inline-size: 42.75rem;
max-xs-172
max-inline-size: 43rem;
max-xs-173
max-inline-size: 43.25rem;
max-xs-174
max-inline-size: 43.5rem;
max-xs-175
max-inline-size: 43.75rem;
max-xs-176
max-inline-size: 44rem;
max-xs-177
max-inline-size: 44.25rem;
max-xs-178
max-inline-size: 44.5rem;
max-xs-179
max-inline-size: 44.75rem;
max-xs-180
max-inline-size: 45rem;
max-xs-181
max-inline-size: 45.25rem;
max-xs-182
max-inline-size: 45.5rem;
max-xs-183
max-inline-size: 45.75rem;
max-xs-184
max-inline-size: 46rem;
max-xs-185
max-inline-size: 46.25rem;
max-xs-186
max-inline-size: 46.5rem;
max-xs-187
max-inline-size: 46.75rem;
max-xs-188
max-inline-size: 47rem;
max-xs-189
max-inline-size: 47.25rem;
max-xs-190
max-inline-size: 47.5rem;
max-xs-191
max-inline-size: 47.75rem;
max-xs-192
max-inline-size: 48rem;
max-xs-193
max-inline-size: 48.25rem;
max-xs-194
max-inline-size: 48.5rem;
max-xs-195
max-inline-size: 48.75rem;
max-xs-196
max-inline-size: 49rem;
max-xs-197
max-inline-size: 49.25rem;
max-xs-198
max-inline-size: 49.5rem;
max-xs-199
max-inline-size: 49.75rem;
max-xs-200
max-inline-size: 50rem;
max-xs-201
max-inline-size: 50.25rem;
max-xs-202
max-inline-size: 50.5rem;
max-xs-203
max-inline-size: 50.75rem;
max-xs-204
max-inline-size: 51rem;
max-xs-205
max-inline-size: 51.25rem;
max-xs-206
max-inline-size: 51.5rem;
max-xs-207
max-inline-size: 51.75rem;
max-xs-208
max-inline-size: 52rem;
max-xs-209
max-inline-size: 52.25rem;
max-xs-210
max-inline-size: 52.5rem;
max-xs-211
max-inline-size: 52.75rem;
max-xs-212
max-inline-size: 53rem;
max-xs-213
max-inline-size: 53.25rem;
max-xs-214
max-inline-size: 53.5rem;
max-xs-215
max-inline-size: 53.75rem;
max-xs-216
max-inline-size: 54rem;
max-xs-217
max-inline-size: 54.25rem;
max-xs-218
max-inline-size: 54.5rem;
max-xs-219
max-inline-size: 54.75rem;
max-xs-220
max-inline-size: 55rem;
max-xs-221
max-inline-size: 55.25rem;
max-xs-222
max-inline-size: 55.5rem;
max-xs-223
max-inline-size: 55.75rem;
max-xs-224
max-inline-size: 56rem;
max-xs-225
max-inline-size: 56.25rem;
max-xs-226
max-inline-size: 56.5rem;
max-xs-227
max-inline-size: 56.75rem;
max-xs-228
max-inline-size: 57rem;
max-xs-229
max-inline-size: 57.25rem;
max-xs-230
max-inline-size: 57.5rem;
max-xs-231
max-inline-size: 57.75rem;
max-xs-232
max-inline-size: 58rem;
max-xs-233
max-inline-size: 58.25rem;
max-xs-234
max-inline-size: 58.5rem;
max-xs-235
max-inline-size: 58.75rem;
max-xs-236
max-inline-size: 59rem;
max-xs-237
max-inline-size: 59.25rem;
max-xs-238
max-inline-size: 59.5rem;
max-xs-239
max-inline-size: 59.75rem;
max-xs-240
max-inline-size: 60rem;
max-xs-241
max-inline-size: 60.25rem;
max-xs-242
max-inline-size: 60.5rem;
max-xs-243
max-inline-size: 60.75rem;
max-xs-244
max-inline-size: 61rem;
max-xs-245
max-inline-size: 61.25rem;
max-xs-246
max-inline-size: 61.5rem;
max-xs-247
max-inline-size: 61.75rem;
max-xs-248
max-inline-size: 62rem;
max-xs-249
max-inline-size: 62.25rem;
max-xs-250
max-inline-size: 62.5rem;
max-xs-251
max-inline-size: 62.75rem;
max-xs-252
max-inline-size: 63rem;
max-xs-253
max-inline-size: 63.25rem;
max-xs-254
max-inline-size: 63.5rem;
max-xs-255
max-inline-size: 63.75rem;
max-xs-256
max-inline-size: 64rem;
max-xs-257
max-inline-size: 64.25rem;
max-xs-258
max-inline-size: 64.5rem;
max-xs-259
max-inline-size: 64.75rem;
max-xs-260
max-inline-size: 65rem;
max-xs-261
max-inline-size: 65.25rem;
max-xs-262
max-inline-size: 65.5rem;
max-xs-263
max-inline-size: 65.75rem;
max-xs-264
max-inline-size: 66rem;
max-xs-265
max-inline-size: 66.25rem;
max-xs-266
max-inline-size: 66.5rem;
max-xs-267
max-inline-size: 66.75rem;
max-xs-268
max-inline-size: 67rem;
max-xs-269
max-inline-size: 67.25rem;
max-xs-270
max-inline-size: 67.5rem;
max-xs-271
max-inline-size: 67.75rem;
max-xs-272
max-inline-size: 68rem;
max-xs-273
max-inline-size: 68.25rem;
max-xs-274
max-inline-size: 68.5rem;
max-xs-275
max-inline-size: 68.75rem;
max-xs-276
max-inline-size: 69rem;
max-xs-277
max-inline-size: 69.25rem;
max-xs-278
max-inline-size: 69.5rem;
max-xs-279
max-inline-size: 69.75rem;
max-xs-280
max-inline-size: 70rem;
max-xs-281
max-inline-size: 70.25rem;
max-xs-282
max-inline-size: 70.5rem;
max-xs-283
max-inline-size: 70.75rem;
max-xs-284
max-inline-size: 71rem;
max-xs-285
max-inline-size: 71.25rem;
max-xs-286
max-inline-size: 71.5rem;
max-xs-287
max-inline-size: 71.75rem;
max-xs-288
max-inline-size: 72rem;
max-xs-289
max-inline-size: 72.25rem;
max-xs-290
max-inline-size: 72.5rem;
max-xs-291
max-inline-size: 72.75rem;
max-xs-292
max-inline-size: 73rem;
max-xs-293
max-inline-size: 73.25rem;
max-xs-294
max-inline-size: 73.5rem;
max-xs-295
max-inline-size: 73.75rem;
max-xs-296
max-inline-size: 74rem;
max-xs-297
max-inline-size: 74.25rem;
max-xs-298
max-inline-size: 74.5rem;
max-xs-299
max-inline-size: 74.75rem;
max-xs-300
max-inline-size: 75rem;
max-xs-301
max-inline-size: 75.25rem;
max-xs-302
max-inline-size: 75.5rem;
max-xs-303
max-inline-size: 75.75rem;
max-xs-304
max-inline-size: 76rem;
max-xs-305
max-inline-size: 76.25rem;
max-xs-306
max-inline-size: 76.5rem;
max-xs-307
max-inline-size: 76.75rem;
max-xs-308
max-inline-size: 77rem;
max-xs-309
max-inline-size: 77.25rem;
max-xs-310
max-inline-size: 77.5rem;
max-xs-311
max-inline-size: 77.75rem;
max-xs-312
max-inline-size: 78rem;
max-xs-313
max-inline-size: 78.25rem;
max-xs-314
max-inline-size: 78.5rem;
max-xs-315
max-inline-size: 78.75rem;
max-xs-316
max-inline-size: 79rem;
max-xs-317
max-inline-size: 79.25rem;
max-xs-318
max-inline-size: 79.5rem;
max-xs-319
max-inline-size: 79.75rem;
max-xs-320
max-inline-size: 80rem;
max-xs-321
max-inline-size: 80.25rem;
max-xs-322
max-inline-size: 80.5rem;
max-xs-323
max-inline-size: 80.75rem;
max-xs-324
max-inline-size: 81rem;
max-xs-325
max-inline-size: 81.25rem;
max-xs-326
max-inline-size: 81.5rem;
max-xs-327
max-inline-size: 81.75rem;
max-xs-328
max-inline-size: 82rem;
max-xs-329
max-inline-size: 82.25rem;
max-xs-330
max-inline-size: 82.5rem;
max-xs-331
max-inline-size: 82.75rem;
max-xs-332
max-inline-size: 83rem;
max-xs-333
max-inline-size: 83.25rem;
max-xs-334
max-inline-size: 83.5rem;
max-xs-335
max-inline-size: 83.75rem;
max-xs-336
max-inline-size: 84rem;
max-xs-337
max-inline-size: 84.25rem;
max-xs-338
max-inline-size: 84.5rem;
max-xs-339
max-inline-size: 84.75rem;
max-xs-340
max-inline-size: 85rem;
max-xs-341
max-inline-size: 85.25rem;
max-xs-342
max-inline-size: 85.5rem;
max-xs-343
max-inline-size: 85.75rem;
max-xs-344
max-inline-size: 86rem;
max-xs-345
max-inline-size: 86.25rem;
max-xs-346
max-inline-size: 86.5rem;
max-xs-347
max-inline-size: 86.75rem;
max-xs-348
max-inline-size: 87rem;
max-xs-349
max-inline-size: 87.25rem;
max-xs-350
max-inline-size: 87.5rem;
max-xs-351
max-inline-size: 87.75rem;
max-xs-352
max-inline-size: 88rem;
max-xs-353
max-inline-size: 88.25rem;
max-xs-354
max-inline-size: 88.5rem;
max-xs-355
max-inline-size: 88.75rem;
max-xs-356
max-inline-size: 89rem;
max-xs-357
max-inline-size: 89.25rem;
max-xs-358
max-inline-size: 89.5rem;
max-xs-359
max-inline-size: 89.75rem;
max-xs-360
max-inline-size: 90rem;
max-xs-361
max-inline-size: 90.25rem;
max-xs-362
max-inline-size: 90.5rem;
max-xs-363
max-inline-size: 90.75rem;
max-xs-364
max-inline-size: 91rem;
max-xs-365
max-inline-size: 91.25rem;
max-xs-366
max-inline-size: 91.5rem;
max-xs-367
max-inline-size: 91.75rem;
max-xs-368
max-inline-size: 92rem;
max-xs-369
max-inline-size: 92.25rem;
max-xs-370
max-inline-size: 92.5rem;
max-xs-371
max-inline-size: 92.75rem;
max-xs-372
max-inline-size: 93rem;
max-xs-373
max-inline-size: 93.25rem;
max-xs-374
max-inline-size: 93.5rem;
max-xs-375
max-inline-size: 93.75rem;
max-xs-376
max-inline-size: 94rem;
max-xs-377
max-inline-size: 94.25rem;
max-xs-378
max-inline-size: 94.5rem;
max-xs-379
max-inline-size: 94.75rem;
max-xs-380
max-inline-size: 95rem;
max-xs-381
max-inline-size: 95.25rem;
max-xs-382
max-inline-size: 95.5rem;
max-xs-383
max-inline-size: 95.75rem;
max-xs-384
max-inline-size: 96rem;
max-xs-10%
max-inline-size: 10%;
max-xs-20%
max-inline-size: 20%;
max-xs-30%
max-inline-size: 30%;
max-xs-40%
max-inline-size: 40%;
max-xs-50%
max-inline-size: 50%;
max-xs-60%
max-inline-size: 60%;
max-xs-70%
max-inline-size: 70%;
max-xs-80%
max-inline-size: 80%;
max-xs-90%
max-inline-size: 90%;
max-xs-100%
max-inline-size: 100%;
max-xs-auto
max-inline-size: auto;
max-xs-dvh
max-inline-size: 100dvh;
max-xs-dvw
max-inline-size: 100dvw;
max-xs-fc
max-inline-size: fit-content;
max-xs-lg
max-inline-size: 64rem;
max-xs-lvh
max-inline-size: 100lvh;
max-xs-lvw
max-inline-size: 100lvw;
max-xs-max
max-inline-size: max-content;
max-xs-md
max-inline-size: 48rem;
max-xs-min
max-inline-size: min-content;
max-xs-px
max-inline-size: 1px;
max-xs-s
max-inline-size: stretch;
max-xs-sm
max-inline-size: 40rem;
max-xs-svh
max-inline-size: 100svh;
max-xs-svw
max-inline-size: 100svw;
max-xs-vb
max-inline-size: 100vb;
max-xs-vh
max-inline-size: 100vh;
max-xs-vi
max-inline-size: 100vi;
max-xs-vmax
max-inline-size: 100vmax;
max-xs-vmin
max-inline-size: 100vmin;
max-xs-vw
max-inline-size: 100vw;
max-xs-xl
max-inline-size: 80rem;
max-xs-xs
max-inline-size: 32rem;
max-xs-xxl
max-inline-size: 96rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

@sm:max-xs-(value)
Small≥640px
@md:max-xs-(value)
Medium≥768px
@lg:max-xs-(value)
Large≥1024px
@xxl:max-xs-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:max-xs-(value)

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:max-xs--(value)