Internal and external dimensions

In CSS3, an element's dimensions are not solely determined by the obvious width and height properties but are also influenced by multiple factors such as the box model, content flow, and calculation methods. Understanding the difference between intrinsic size and extrinsic size allows for more precise control over layout behavior.

Intrinsic Size: Determined by Content

Intrinsic size is the dimension an element automatically calculates based on its content, without explicit declaration. For example, a <div> containing text will, by default, stretch its width to fill the parent container, while its height is determined by the number of text lines. The following example demonstrates the intrinsic size behavior of typical inline elements and block-level elements:

<div class="intrinsic">
  <span>This is an inline text whose width is determined by its content</span>
  <p>A block-level element's width fills its parent by default, while its height expands based on content</p>
</div>

CSS3 introduces keywords like min-content and max-content, allowing developers to explicitly reference the content's inherent dimensions:

.intrinsic {
  width: max-content; /* Width equals the length of the longest line of content */
  border: 1px dashed red;
}

Extrinsic Size: Enforced by Contextual Constraints

Extrinsic size is defined by explicitly setting width, height, or external container constraints. For example, the dimensions of child items in Flex or Grid layouts may be allocated by the parent container:

.container {
  display: grid;
  grid-template-columns: 100px 1fr; /* First column fixed at 100px, second column adaptive */
}
.item {
  height: 50px; /* Explicitly sets extrinsic height */
}

Percentage units are a classic example of extrinsic size dependency:

.box {
  width: 50%; /* Relative to the parent container's width */
  height: calc(100vh - 20px); /* Depends on viewport height */
}

The Impact of the Box Model on Dimensions

The CSS3 box-sizing property alters how dimensions are calculated:

• content-box (default): width/height only includes the content area.
• border-box: width/height includes padding and borders.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px; /* Does not increase the actual rendered width */
}

Dimension Calculation in Special Scenarios

Dimensions of Replaced Elements

For replaced elements like <img>, the default dimensions are determined by the following priority:

1. Explicitly set width/height attributes.
2. The image's intrinsic pixel dimensions.
3. Parent container constraints.

img {
  width: auto; /* Maintains original aspect ratio */
  max-width: 100%; /* Prevents overflow */
}

Dimensions of Flex/Grid Items

In flexible layouts, flex-basis defines the initial size of an item:

.flex-item {
  flex: 1 0 200px; /* Base size of 200px, can grow but not shrink */
}

Dimension Strategies in Responsive Design

Media queries are often combined with relative units to achieve responsive dimensions:

.card {
  width: clamp(300px, 50vw, 600px); /* Dynamically adjusts between 300px and 600px */
  aspect-ratio: 16/9; /* Fixed aspect ratio */
}

The Relationship Between Dimensions and Overflow

Once dimensions are defined, content overflow must be handled:

.scroll-box {
  width: 200px;
  height: 150px;
  overflow: auto; /* Automatically displays scrollbars when needed */
}

The Influence of Emerging CSS Features on Dimensions

CSS Grid's minmax() function allows for more flexible dimension definitions:

.grid-container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

CSS Container Queries enable responsive dimensions based on the container rather than the viewport:

@container (min-width: 300px) {
  .component {
    width: 50%;
  }
}