How width is set in CSS

Date: 2020-04-02 | Modified: 2021-01-28 | Tags: 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. See also my companion page on CSS height.

By default, elements adjust to the width of their container when they are

block elements in block containers
elements in flex column containers
elements in grid containers

By default, elements adjust to width of their content when they are

inline elements in block containers
elements in flex row containers
elements that are absolutely positioned
elements that are floated

Some elements can be made to adjust to the width of their container by

setting their width to 100% (tip: if there are intermediate elements, their width may need to be set to 100% also)
setting flex-grow for flex row containers

Some elements can be made to adjust to the width of their content by

using fit-content (not supported by IE)
setting align-items to something other than stretch for elements in flex column containers
setting justify-items to something other than stretch for elements in grid containers

For some cases, setting overflow limits an element's width to the width of its container for wide content:

flew row container example
grid container example

Some miscellaneous cases:

flex row containers with flex-grow set expand to the width of their content for wide content
elements in grid containers setting width to 100% are NOT limited by the width of their container
setting overflow has no effect for elements in grid containers when justify-items is set

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;
}

SaltyCrane Blog — Notes on JavaScript and web development