SaltyCrane Blog — Notes on JavaScript and web development

How width is set in CSS

In CSS, I'm often confused about when an element adjusts to the width of its container and when it adjusts to the width of its content. I made some experiments to test the CSS behavior in various conditions. The script to generate the experiments is on github and the results are shown below.

By default, elements adjust to the width of their container when they are
By default, elements adjust to width of their content when they are
Some elements can be made to adjust to the width of their container by
Some elements can be made to adjust to the width of their content by
For some cases, setting overflow limits an element's width to the width of its container for wide content:
Some miscellaneous cases:

See also

Block containers

Block containers - block elements in block containers adjust to the width of their container by default
#container-1a
#example-1a
#content-1a
HTML
<div id="container-1a"> <div id="example-1a"> <div id="content-1a" /> </div> </div>
CSS
#container-1a { display: block; /* default */ width: 400px; } #example-1a { display: block; /* default */ } #content-1a { width: 120px; }
#container-1b
#example-1b
#content-1b
HTML
<div id="container-1b"> <div id="example-1b"> <div id="content-1b" /> </div> </div>
CSS
#container-1b { display: block; /* default */ width: 400px; } #example-1b { display: block; /* default */ } #content-1b { width: 420px; }
Block containers, fit-content - block elements in block containers adjust to the width of their container by default, but can use fit-content to adjust to the width of their content. MDN docs on width. NOTE: fit-content is not supported by IE.
#container-1c
#example-1c
#content-1c
HTML
<div id="container-1c"> <div id="example-1c"> <div id="content-1c" /> </div> </div>
CSS
#container-1c { display: block; /* default */ width: 400px; } #example-1c { display: block; /* default */ width: fit-content; } #content-1c { width: 120px; }
#container-1d
#example-1d
#content-1d
HTML
<div id="container-1d"> <div id="example-1d"> <div id="content-1d" /> </div> </div>
CSS
#container-1d { display: block; /* default */ width: 400px; } #example-1d { display: block; /* default */ width: fit-content; } #content-1d { width: 420px; }

Inline elements

Inline elements - inline elements adjust to the width of their content by default
#container-2a
#example-2a
#content-2a
HTML
<div id="container-2a"> <div id="example-2a"> <div id="content-2a" /> </div> </div>
CSS
#container-2a { display: block; /* default */ width: 400px; } #example-2a { display: inline-block; } #content-2a { width: 120px; }
#container-2b
#example-2b
#content-2b
HTML
<div id="container-2b"> <div id="example-2b"> <div id="content-2b" /> </div> </div>
CSS
#container-2b { display: block; /* default */ width: 400px; } #example-2b { display: inline-block; } #content-2b { width: 420px; }
Inline elements, width 100% - inline elements adjust to the width of their container if width is set to 100%
#container-2c
#example-2c
#content-2c
HTML
<div id="container-2c"> <div id="example-2c"> <div id="content-2c" /> </div> </div>
CSS
#container-2c { display: block; /* default */ width: 400px; } #example-2c { display: inline-block; width: 100%; } #content-2c { width: 120px; }
#container-2d
#example-2d
#content-2d
HTML
<div id="container-2d"> <div id="example-2d"> <div id="content-2d" /> </div> </div>
CSS
#container-2d { display: block; /* default */ width: 400px; } #example-2d { display: inline-block; width: 100%; } #content-2d { width: 420px; }

Flex row containers

Flex row container - elements in flex row containers adjust to the width of their content by default
#container-3a
#example-3a
#content-3a
HTML
<div id="container-3a"> <div id="example-3a"> <div id="content-3a" /> </div> </div>
CSS
#container-3a { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3a { display: block; /* default */ } #content-3a { width: 120px; }
#container-3b
#example-3b
#content-3b
HTML
<div id="container-3b"> <div id="example-3b"> <div id="content-3b" /> </div> </div>
CSS
#container-3b { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3b { display: block; /* default */ } #content-3b { width: 420px; }
Flex row container, width 100% - elements in flex row containers adjust to the width of their content by default. Setting width to 100%causes them to adjust to the width of their container.
#container-3c
#example-3c
#content-3c
HTML
<div id="container-3c"> <div id="example-3c"> <div id="content-3c" /> </div> </div>
CSS
#container-3c { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3c { display: block; /* default */ width: 100%; } #content-3c { width: 120px; }
#container-3d
#example-3d
#content-3d
HTML
<div id="container-3d"> <div id="example-3d"> <div id="content-3d" /> </div> </div>
CSS
#container-3d { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3d { display: block; /* default */ width: 100%; } #content-3d { width: 420px; }
Flex row container, flex-grow - elements in flex row containers adjust to the width of their content by default. Setting flex-grow to 1 causes them to expand to the width of their container if their content is narrower than their container. MDN docs on flex-grow.
#container-3e
#example-3e
#content-3e
HTML
<div id="container-3e"> <div id="example-3e"> <div id="content-3e" /> </div> </div>
CSS
#container-3e { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3e { display: block; /* default */ flex-grow: 1; } #content-3e { width: 120px; }
If content is wider than the container, the element expands to the width of their content.
#container-3f
#example-3f
#content-3f
HTML
<div id="container-3f"> <div id="example-3f"> <div id="content-3f" /> </div> </div>
CSS
#container-3f { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3f { display: block; /* default */ flex-grow: 1; } #content-3f { width: 420px; }
Flex row container, flex-grow, overflow - setting overflow to something other than visible limits the width of the element to the width of its container.
#container-3g
#example-3g
#content-3g
HTML
<div id="container-3g"> <div id="example-3g"> <div id="content-3g" /> </div> </div>
CSS
#container-3g { display: flex; flex-direction: row; /* default */ justify-content: normal; /* default - behaves as flex-start in this case */ width: 400px; } #example-3g { display: block; /* default */ flex-grow: 1; overflow: auto; } #content-3g { width: 420px; }

Flex column containers

Flex column container - elements in flex column containers adjust to the width of their container by default
#container-4a
#example-4a
#content-4a
HTML
<div id="container-4a"> <div id="example-4a"> <div id="content-4a" /> </div> </div>
CSS
#container-4a { display: flex; align-items: normal; /* default - behaves like stretch in this case */ flex-direction: column; width: 400px; } #example-4a { display: block; /* default */ } #content-4a { width: 120px; }
#container-4b
#example-4b
#content-4b
HTML
<div id="container-4b"> <div id="example-4b"> <div id="content-4b" /> </div> </div>
CSS
#container-4b { display: flex; align-items: normal; /* default - behaves like stretch in this case */ flex-direction: column; width: 400px; } #example-4b { display: block; /* default */ } #content-4b { width: 420px; }
Flex column container, align-items - elements in a flex column container adjust to the width of the container by default, but setting align-items to something other than stretch (e.g. flex-start), causes the element to adjust to the width of its content. MDN docs on align-items.
#container-4c
#example-4c
#content-4c
HTML
<div id="container-4c"> <div id="example-4c"> <div id="content-4c" /> </div> </div>
CSS
#container-4c { display: flex; align-items: flex-start; flex-direction: column; width: 400px; } #example-4c { display: block; /* default */ } #content-4c { width: 120px; }
#container-4d
#example-4d
#content-4d
HTML
<div id="container-4d"> <div id="example-4d"> <div id="content-4d" /> </div> </div>
CSS
#container-4d { display: flex; align-items: flex-start; flex-direction: column; width: 400px; } #example-4d { display: block; /* default */ } #content-4d { width: 420px; }

Grid containers

Grid container - elements in a grid container expand to the width of their container if their content is narrower than their container.
#container-5a
#example-5a
#content-5a
HTML
<div id="container-5a"> <div id="example-5a"> <div id="content-5a" /> </div> </div>
CSS
#container-5a { display: grid; justify-items: normal; /* default - behaves like stretch in this case */ width: 400px; } #example-5a { display: block; /* default */ } #content-5a { width: 120px; }
If the content is wider than the container, the element expands to the width of their content instead.
#container-5b
#example-5b
#content-5b
HTML
<div id="container-5b"> <div id="example-5b"> <div id="content-5b" /> </div> </div>
CSS
#container-5b { display: grid; justify-items: normal; /* default - behaves like stretch in this case */ width: 400px; } #example-5b { display: block; /* default */ } #content-5b { width: 420px; }
Grid container, width 100% - elements in a grid container expand to the width of their content for wide content even if width is set to 100%
#container-5c
#example-5c
#content-5c
HTML
<div id="container-5c"> <div id="example-5c"> <div id="content-5c" /> </div> </div>
CSS
#container-5c { display: grid; justify-items: normal; /* default - behaves like stretch in this case */ width: 400px; } #example-5c { display: block; /* default */ width: 100%; } #content-5c { width: 420px; }
Grid container, overflow - if content is wider than the continer, elements in a grid container adjust to the width of the container if overflow is set to something other than visible
#container-5d
#example-5d
#content-5d
HTML
<div id="container-5d"> <div id="example-5d"> <div id="content-5d" /> </div> </div>
CSS
#container-5d { display: grid; justify-items: normal; /* default - behaves like stretch in this case */ width: 400px; } #example-5d { display: block; /* default */ overflow: auto; } #content-5d { width: 420px; }
Grid container, justify-items - elements in grid containers with justify-items set to something other than stretch adjust to the width of their content. MDN docs on justify-items.
#container-5e
#example-5e
#content-5e
HTML
<div id="container-5e"> <div id="example-5e"> <div id="content-5e" /> </div> </div>
CSS
#container-5e { display: grid; justify-items: start; width: 400px; } #example-5e { display: block; /* default */ } #content-5e { width: 120px; }
#container-5f
#example-5f
#content-5f
HTML
<div id="container-5f"> <div id="example-5f"> <div id="content-5f" /> </div> </div>
CSS
#container-5f { display: grid; justify-items: start; width: 400px; } #example-5f { display: block; /* default */ } #content-5f { width: 420px; }
Grid container, justify-items, overflow - setting overflow has no effect when justify-items is set
#container-5g
#example-5g
#content-5g
HTML
<div id="container-5g"> <div id="example-5g"> <div id="content-5g" /> </div> </div>
CSS
#container-5g { display: grid; justify-items: start; width: 400px; } #example-5g { display: block; /* default */ overflow: auto; } #content-5g { width: 420px; }

Absolute positioning

Absolutely positioned - when position: absolute is used, the element adjusts to the width of its content. MDN docs on position: absolute.
#container-6a
#example-6a
#content-6a
HTML
<div id="container-6a"> <div id="example-6a"> <div id="content-6a" /> </div> </div>
CSS
#container-6a { display: block; /* default */ position: relative; width: 400px; } #example-6a { display: block; /* default */ position: absolute; } #content-6a { width: 120px; }
#container-6b
#example-6b
#content-6b
HTML
<div id="container-6b"> <div id="example-6b"> <div id="content-6b" /> </div> </div>
CSS
#container-6b { display: block; /* default */ position: relative; width: 400px; } #example-6b { display: block; /* default */ position: absolute; } #content-6b { width: 420px; }

Floated elements

Floated elements - elements that set float adjust to the width of their content. MDN docs on float.
#container-7a
#example-7a
#content-7a
HTML
<div id="container-7a"> <div id="example-7a"> <div id="content-7a" /> </div> </div>
CSS
#container-7a { display: block; /* default */ width: 400px; } #example-7a { display: block; /* default */ float: left; } #content-7a { width: 120px; }
#container-7b
#example-7b
#content-7b
HTML
<div id="container-7b"> <div id="example-7b"> <div id="content-7b" /> </div> </div>
CSS
#container-7b { display: block; /* default */ width: 400px; } #example-7b { display: block; /* default */ float: left; } #content-7b { width: 420px; }

Comments