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 Block 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-block-size

      CSS max-block-size property sets the maximum size of an element in the opposite direction to its writing direction provided by writing_mode. For horizontal writing, it is equivalent to max-height, while for vertical writing, it is the same as max-width.
      The max-inline-size property defines the maximum length for the other dimension.
      It's helpful to set max-width and max-height for horizontal and vertical sizes, respectively.
      When using max-height or max-width, opt for max-block-size for content's maximum height and max-inline-size for maximum width. Check out writing_mode examples to see the various writing modes.

      Possible Values

      You can set the value of the max-block-size property to any value that's allowed for the max-height and max-width values.
      • <length> − Sets the max-block-size to an absolute value.
      • <percentage> − Sets the max-block-size as a percentage of the block axis's containing block's size.
      • none − There is no size limit for the box.
      • max-content − The intrinsic max-block-size.
      • min-content − The minimum max-block-size.
      • fit-content − Available space up to the max-content, but never exceeds the min(max-content, max(min-content, stretch)).
      • fit-content(<length-percentage>) − Fit-content formula is used with the provided argument in place of the available space, i.e. min(max-content, max(min-content, argument)).

      Applies To

      Same as height and width.

      Syntax

      <length> Values

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

      <percentage> Values

      max-inline-size: 40%;

      Keyword Values

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

      CSS max-block-size - writing-mode Effects

      The following are the ways in which the writing-mode values affect the mapping of max-block-size to max-height or max-width:
      Values of writing-mode
      max-block-size is equivalent to
      horizontal-tb, lr(Deprecated), lr-tb (Deprecated), rl (Deprecated), rb (Deprecated), rb-rl (Deprecated)
      max-height
      vertical-rl, vertical-lr, sideways-rl (Experimental), sideways-lr (Experimental), tb (Deprecated), tb-rl (Deprecated)
      max-width
      CSS Writing Modes Level 3 specification eliminated the writing-mode values sideways-lr and sideways-rl late in the design process. They may be recovered at Level 4.
      Only SVG 1.x contexts may utilise the writing modes lr, lr-tb, rl, rb, and rb-tl; HTML contexts are no longer permitted for their use.

      CSS max-block-size - <length> Value

      The following example demonstrates the max-block-size: 80px property sets the height of the div element to a maximum of 70px 
      <html>
      <head>
      <style>
         div {
            background-color: orange;
            border: 2px solid blue;
            max-block-size: 80px;
         }
      </style>
      </head>
      <body>
         <div>
            <h3>Tutorialspoint</h3>
            <h4>CSS max-block-size: 80px</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </div>
      </body>
      </html>

      CSS max-block-size - <percentage> Value

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

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

      The following example demonstrates the max-block-size: max-content property allowed the height of the div element to expand vertically to fit the content 
      <html>
      <head>
      <style>
         div {
            background-color: violet;
            border: 2px solid blue;
            max-block-size: max-content;
         }
      </style>
      </head>
      <body>
         <div>
            <h2>Tutorialspoint</h2>
            <h3>CSS max-block-size: max-content</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </div>
      </body>
      </html>

      CSS max-block-size - With Horizontal and Vertical Text

      The following example demonstrates how to use max-block-size property with writing-modes to display text in horizontal and vertical directions 
      <html>
      <head>
      <style>
         div {
            background-color: yellow;
            border: 2px solid blue;
            margin: 10px;
            padding: 5px;
            max-block-size: 150px;
            min-block-size: 120px;
         }
         .box1 {
            writing-mode: horizontal-tb;
         }
         .box2{
            writing-mode: vertical-rl;
         }
      </style>
      </head>
      <body>
         <div class="box1">
            <h3>CSS max-block-size with writing-mode: horizontal-tb</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
         </div>
         <div class="box2">
            <h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
         </div>
      </body>
      </html>