Fixed sizes

One of the common situations that breaks the layout is that a container with a fixed width or fixed height is filled with content of different lengths. When the content is too long, content overflow will occur, causing the layout to be broken.

Fixed height

A common situation is that the height of a card container is fixed, but its content is greater than the height of the container, causing the layout to be broken.

.card {
  height: 100px;
}

The height of a card container is fixed, but its content is larger than the height of the container, causing the layout to be broken.

The height of a card container is fixed, but its content is larger than the height of the container, causing the layout to be broken.

To prevent content from overflowing from the card, we need to use min-height instead of height.

.card {
  min-height: 100px;
}

A card container has a fixed height, but its content is larger than the container's height, causing the layout to be broken.

A card container has a fixed height, but its content is larger than the container's height, causing the layout to be broken.

This prevents content from overflowing from the card.

Fixed width

Another common situation is that the content of a label is too close to the left or right edge and overflows. This is due to the use of fixed width.

.tag {
  width: 100%;
}

Tag content

Tag content is relatively long

To solve this problem, we can use min-width instead of width

.tag {
  min-width: 100px;
}

Tag content

Tag content is relatively long