How height is set in CSS
Here are some CSS experiments to test when elements adjust to the height of their container and when they adjust to the height of their content. The script to generate the experiments is on github and the results are shown below. See also my companion page on CSS width.
By default, elements adjust to height of their container when they are
- elements in flex row containers
- elements in grid containers with short content
By default, elements adjust to the height of their content when they are
- elements in block containers
- elements in flex column containers
- elements in grid containers with tall content
- elements that are absolutely positioned
- elements that are floated
Some elements can be made to adjust to the height of their container by
- setting
height
to100%
for elements in block containers, elements in flex column containers, absolutely positioned elements, and floated elements. (Note: it does not have an effect for elements in grid containers.) - setting
flex-grow
for elements in flex column containers where content is shorter than the container. (Note: it adjusts to the height of the content if the content is tailler than the container.) - setting
overflow
for elements in grid containers with tall content
Some elements can be made to adjust to the height of their content by
- setting
align-items
to something other thanstretch
for elements in flex row containers and elements in grid containers
Some miscellaneous cases:
- for elements in grid containers, setting
overflow
limits an element's height to the height of its container for tall content - flex column containers with
flex-grow
set expand to the height of their content for tall content - elements in grid containers setting
height
to100%
are NOT limited by the height of their container - setting
overflow
has no effect for elements in grid containers whenalign-items
is set
See also¶
Block containers¶
Block containers - elements in block containers adjust to the height of their content by default
HTML<div id="container-1a"> <div id="example-1a"> <div id="content-1a" /> </div> </div>
CSS#container-1a { display: block; /* default */ height: 400px; } #example-1a {} #content-1a { height: 80px; }
Block containers, tall content - elements in block containers adjust to the height of their content even when the content is taller than the container
HTML<div id="container-1b"> <div id="example-1b"> <div id="content-1b" /> </div> </div>
CSS#container-1b { display: block; /* default */ height: 400px; } #example-1b {} #content-1b { height: 420px; }
Block elements, height 100% - block elements expand to the height of their container if height is set to 100%
HTML<div id="container-1c"> <div id="example-1c"> <div id="content-1c" /> </div> </div>
CSS#container-1c { display: block; /* default */ height: 400px; } #example-1c { height: 100%; } #content-1c { height: 80px; }
Block elements, tall content, height 100% - block elements contract to the height of their container if height is set to 100%
HTML<div id="container-1d"> <div id="example-1d"> <div id="content-1d" /> </div> </div>
CSS#container-1d { display: block; /* default */ height: 400px; } #example-1d { height: 100%; } #content-1d { height: 420px; }
Flex row containers¶
Flex row container - elements in flex row containers expand to the height of their container by default
HTML<div id="container-3a"> <div id="example-3a"> <div id="content-3a" /> </div> </div>
CSS#container-3a { align-items: normal; /* default - behaves as stretch in this case */ display: flex; flex-direction: row; /* default */ height: 400px; } #example-3a {} #content-3a { height: 80px; }
Flex row container, tall content - elements in flex row containers contract to the height of their container by default
HTML<div id="container-3b"> <div id="example-3b"> <div id="content-3b" /> </div> </div>
CSS#container-3b { align-items: normal; /* default - behaves as stretch in this case */ display: flex; flex-direction: row; /* default */ height: 400px; } #example-3b {} #content-3b { height: 420px; }
Flex row container, align-items set - elements in flex row containers adjust to the height of their content if
align-items
is set to something other than stretch
HTML<div id="container-3c"> <div id="example-3c"> <div id="content-3c" /> </div> </div>
CSS#container-3c { align-items: flex-start; display: flex; flex-direction: row; /* default */ height: 400px; } #example-3c {} #content-3c { height: 80px; }
Flex row container, align-items set, tall content - elements in flex row containers adjust to the height of their content if
align-items
is set to something other than stretch
HTML<div id="container-3d"> <div id="example-3d"> <div id="content-3d" /> </div> </div>
CSS#container-3d { align-items: flex-start; display: flex; flex-direction: row; /* default */ height: 400px; } #example-3d {} #content-3d { height: 420px; }
Flex column containers¶
Flex column container - elements in flex columns containers adjust to the height of the content by default
HTML<div id="container-4a"> <div id="example-4a"> <div id="content-4a" /> </div> </div>
CSS#container-4a { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4a {} #content-4a { height: 80px; }
Flex column container, tall content - elements in flex columns containers adjust to the height of their content even for tall content
HTML<div id="container-4b"> <div id="example-4b"> <div id="content-4b" /> </div> </div>
CSS#container-4b { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4b {} #content-4b { height: 420px; }
Flex column container, height: 100% - elements in flex column containers expand to the height of their container if
height
is set to 100%
HTML<div id="container-4c"> <div id="example-4c"> <div id="content-4c" /> </div> </div>
CSS#container-4c { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4c { height: 100%; } #content-4c { height: 80px; }
Flex column container, height: 100%, tall content - elements in flex column containers contract to the height of their container if
height
is set to 100%
HTML<div id="container-4d"> <div id="example-4d"> <div id="content-4d" /> </div> </div>
CSS#container-4d { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4d { height: 100%; } #content-4d { height: 420px; }
Flex column container, flex-grow - elements in flex column containers expand to the height of their container when
flex-grow
is set to 1
HTML<div id="container-4e"> <div id="example-4e"> <div id="content-4e" /> </div> </div>
CSS#container-4e { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4e { flex-grow: 1; } #content-4e { height: 80px; }
Flex column container, flex-grow, tall content - elements in flex column containers expand to the height of their content when
flex-grow
is set to 1
HTML<div id="container-4f"> <div id="example-4f"> <div id="content-4f" /> </div> </div>
CSS#container-4f { display: flex; flex-direction: column; justify-content: normal; /* default */ height: 400px; } #example-4f { flex-grow: 1; } #content-4f { height: 420px; }
Grid containers¶
Grid container - elements in grid containers expand to the height of the container by default
HTML<div id="container-5a"> <div id="example-5a"> <div id="content-5a" /> </div> </div>
CSS#container-5a { align-items: normal; /* default - behaves like stretch in this case */ display: grid; height: 400px; } #example-5a {} #content-5a { height: 80px; }
Grid container, tall content - elements with tall content in grid containers expand to the height of the content
HTML<div id="container-5b"> <div id="example-5b"> <div id="content-5b" /> </div> </div>
CSS#container-5b { align-items: normal; /* default - behaves like stretch in this case */ display: grid; height: 400px; } #example-5b {} #content-5b { height: 420px; }
Grid container, tall content, height 100% - surprisingly, setting
height
to 100%
does not contract an element's height to the height of its container. The element adjusts to the height of the content.HTML<div id="container-5c"> <div id="example-5c"> <div id="content-5c" /> </div> </div>
CSS#container-5c { align-items: normal; /* default - behaves like stretch in this case */ display: grid; height: 400px; } #example-5c { height: 100%; } #content-5c { height: 420px; }
Grid container, tall content, overflow - elements with tall content in grid containers adjust to the height of the container if
overflow
is set to something other than visible
HTML<div id="container-5d"> <div id="example-5d"> <div id="content-5d" /> </div> </div>
CSS#container-5d { align-items: normal; /* default - behaves like stretch in this case */ display: grid; height: 400px; } #example-5d { overflow: auto; } #content-5d { height: 420px; }
Grid container, align-items - if a grid container sets
align-items
to something other than stretch
(the default), then the element will adjust to the height of the content MDN docs on align-items
.HTML<div id="container-5e"> <div id="example-5e"> <div id="content-5e" /> </div> </div>
CSS#container-5e { align-items: start; display: grid; height: 400px; } #example-5e {} #content-5e { height: 80px; }
Grid container, align-items, tall content - elements with tall content in grid containers expand to the height of the content
HTML<div id="container-5f"> <div id="example-5f"> <div id="content-5f" /> </div> </div>
CSS#container-5f { align-items: start; display: grid; height: 400px; } #example-5f {} #content-5f { height: 420px; }
Grid container, align-items, tall content, overflow - elements with tall content in grid containers expand to the height of the content even if
overflow
is setHTML<div id="container-5g"> <div id="example-5g"> <div id="content-5g" /> </div> </div>
CSS#container-5g { align-items: start; display: grid; height: 400px; } #example-5g { overflow: auto; } #content-5g { height: 420px; }
Absolute positioning¶
Absolutely positioned -
HTML<div id="container-6a"> <div id="example-6a"> <div id="content-6a" /> </div> </div>
CSS#container-6a { display: block; /* default */ position: relative; height: 400px; } #example-6a { position: absolute; } #content-6a { height: 80px; }
Absolutely positioned, tall content -
HTML<div id="container-6b"> <div id="example-6b"> <div id="content-6b" /> </div> </div>
CSS#container-6b { display: block; /* default */ position: relative; height: 400px; } #example-6b { position: absolute; } #content-6b { height: 420px; }
Absolutely positioned, height 100% -
HTML<div id="container-6c"> <div id="example-6c"> <div id="content-6c" /> </div> </div>
CSS#container-6c { display: block; /* default */ position: relative; height: 400px; } #example-6c { height: 100%; position: absolute; } #content-6c { height: 80px; }
Absolutely positioned, height 100%, tall content -
HTML<div id="container-6d"> <div id="example-6d"> <div id="content-6d" /> </div> </div>
CSS#container-6d { display: block; /* default */ position: relative; height: 400px; } #example-6d { height: 100%; position: absolute; } #content-6d { height: 420px; }
Floated elements¶
Floated elements - elements that set
float
adjust to the height of their content. MDN docs on float
.HTML<div id="container-7a"> <div id="example-7a"> <div id="content-7a" /> </div> </div>
CSS#container-7a { display: block; /* default */ height: 400px; } #example-7a { float: left; } #content-7a { height: 80px; }
Floated elements, tall content - elements that set
float
adjust to the height of their contentHTML<div id="container-7b"> <div id="example-7b"> <div id="content-7b" /> </div> </div>
CSS#container-7b { display: block; /* default */ height: 400px; } #example-7b { float: left; } #content-7b { height: 420px; }
Floated elements, height 100% -
HTML<div id="container-7c"> <div id="example-7c"> <div id="content-7c" /> </div> </div>
CSS#container-7c { display: block; /* default */ height: 400px; } #example-7c { float: left; height: 100%; } #content-7c { height: 80px; }
Floated elements, height 100%, tall content -
HTML<div id="container-7d"> <div id="example-7d"> <div id="content-7d" /> </div> </div>
CSS#container-7d { display: block; /* default */ height: 400px; } #example-7d { float: left; height: 100%; } #content-7d { height: 420px; }