Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Max Inline Size

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      max-inline-size

      CSS max-inline-size property specifies the maximum horizontal or vertical size of an element's block, determined by its writing mode and equivalent to either max-height and max-width based on the writing mode value.
      The max-inline-size property sets the maximum width for horizontal writing modes and the maximum height for vertical writing modes, respectively. A companion property, max-block-size defines the other dimension.

      Possible Values

      The max-inline-size property accepts the same values as max-height and max-width.

      Applies To

      Same as width and height.

      Syntax

      <length> Values

      max-inline-size: 300px;
      max-inline-size: 25em;

      <percentage> Values

      max-inline-size: 40%;

      Keyword Values

      max-inline-size: none;
      max-inline-size: max-content;
      max-inline-size: min-content;
      max-inline-size: fit-content;
      max-inline-size: fit-content(20em);

      CSS max-inline-size - <length> Value

      The following example demonstrates the max-inline-size: 300px property sets the maximum width of the element to the 300px 
      <html>
      <head>
      <style>
         div {
            background-color: greenyellow;
            border: 3px solid red;
            max-inline-size: 300px;
         }
      </style>
      </head>
      <body>
         <div>
            <h2>Tutorialspoint</h2>
            <h4>CSS max-inline-size: 300px</h4>
         </div>
      </body>
      </html>

      CSS max-inline-size - <percentage> Value

      The following example demonstrates the max-inline-size: 80% property sets the maximum width of the element to the 80% 
      <html>
      <head>
      <style>
         div {
            background-color: greenyellow;
            border: 3px solid red;
            max-inline-size: 80%;
         }
      </style>
      </head>
      <body>
         <div>
            <h2>Tutorialspoint</h2>
            <h4>CSS max-inline-size: 80%</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </div>
      </body>
      </html>

      CSS max-inline-size - <max-content> Value

      The following example demonstrates the max-inline-size: max-content property allowed the width of the div element to expand horizontally to fit the content 
      <html>
      <head>
      <style>
         div {
            background-color: greenyellow;
            border: 3px solid red;
            max-inline-size: max-content;
         }
      </style>
      </head>
      <body>
         <div>
            <h2>Tutorialspoint</h2>
            <h4>CSS max-inline-size: max-content</h4>
         </div>
      </body>
      </html>

      CSS max-inline-size - With Vertical Text

      The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction 
      <html>
      <head>
      <style>
         div {
            background-color: greenyellow;
            border: 2px solid blue;
            margin: 10px;
            padding: 5px;
            block-size: 100%;
            max-inline-size: 100px;
            writing-mode: vertical-rl;
         }
      </style>
      </head>
      <body>
         <div >
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </div>
      </body>
      </html>