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.
- elements in flex row containers
- elements in grid containers with short content
- 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
- 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
- setting
align-items
to something other thanstretch
for elements in flex row containers and elements in grid containers
- 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¶
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; }
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; }
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; }
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¶
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; }
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; }
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; }
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¶
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; }
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; }
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; }
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-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-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¶
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; }
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; }
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; }
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; }
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; }
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; }
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¶
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; }
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; }
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; }
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¶
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; }
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; }
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; }
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; }