CSS properties - max-related

revision:

Content

max-block-size property max-height property max-inline-size property max-width property

max-block-size property

top

- specifies the maximum size of an element in the block direction. If the content is smaller than the maximum size in block direction, the max-block-size property value has no effect. If the content is larger than the maximum size in block direction, the max-block-size property value will be applied.

Note: The related CSS property "writing-mode" defines block direction, and this affects the result of the max-block-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS max-block-size property is very similar to CSS properties "max-height" and "max-width", but the max-block-size property is dependent on block direction. .

CSS syntax : max-block-size: auto | value | initial | inherit;

Property values:

auto : default. The element's default max-block-size value.

length : specifies max-block-size in px, pt, cm, etc

% : specifies max-block-size in percent relative to size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maxBlockSize="6vw"

example: max-block-size property

max-block-size: 3.5vw;

Text to try to expand the box

Text to try to expand the box

code: 
                    <div id="DIV-A">
                        <p>max-block-size: 3.5vw;</p>
                        <p>Text to try to expand the box</p>
                        <p>Text to try to expand the box</p>
                    </div>
                    <style>
                        #DIV-A {background-color: lightblue; border: solid black 0.1vw; max-block-size: 3.5vw;}
                    </style>

max-height property

top

- defines the maximum height of an element. If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the "overflow property". If the content is smaller than the maximum height, the max-height property has no effect.

Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.

CSS syntax : max-height: none | length | initial | inherit;

Property values:

none : no maximum height. This is default.

length : defines the maximum height in px, cm, etc.

% : defines the maximum height in percent of the containing block.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maxHeight="6vw"

example: max-height property

max-height: none (default):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

max-height: 4vw:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

code: 
                    <div>
                        <h4>max-height: none (default):</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, 
                        at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. 
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                        <h4>max-height: 4vw:</h4>
                        <p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar
                        , at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. 
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                    </div>
                    <style>
                        p.ex1 { max-height: 4vw; overflow: auto;}
                    </style>

max-inline-size property

top

- specifies the maximum size of an element in the inline direction. If the content is smaller than the maximum size in inline direction, the max-inline-size property value has no effect. If the content is larger than the maximum size in inline direction, the max-inline-size property value will be applied.

Note: The related CSS property "writing-mode" defines inline direction, and this affects the result of the max-inline-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS max-inline-size property is very similar to CSS properties "max-height" and "max-width", but the max-iline-size property is dependent on inline direction. .

CSS syntax : max-inline-size: auto | value | initial | inherit;

Property values:

auto : default. The element's default max-inline-size value.

length : specifies max-inline-size in px, pt, cm, etc

% : specifies max-inline-size in percent relative to size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maxInlineSize="6vw"

example: max-inline-size property

max-inline-size: 6vw;

code: 
                    <div id="DIV-B">
                        <p>max-inline-size: 6vw;</p>
                        
                    </div>
                    <style>
                        #DIV-B {background-color: lightblue; border: solid black 0.1vw; max-inline-size: 6vw; display:inline-block;}
                    </style>

max-width property

top

- defines the maximum width of an element. If the content is larger than the maximum width, it will automatically change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than the max-width. The value of the max-width property overrides the width property.

CSS syntax : max-width: none | length | initial | inherit;

Property values:

none : no maximum width. This is default.

length : defines the maximum width in px, cm, etc.

% : defines the maximum width in percent of the containing block.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.maxWidth="6vw"

example: max-width property

max-width: none (default):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

max-width: 15vw:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

code: 
                    <div>
                        <h4>max-width: none (default):</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                        at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                        <h4>max-width: 15vw:</h4>
                        <p class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                        at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. 
                        Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, 
                        nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
                    </div>
                    <style>
                        p.ex2 { max-width: 15vw;}
                    </style>