Sizing Elements and Handling Overflow in CSS Flexbox

1. Sizing Elements

1.1 Intrinsic Size

Some elements have a natural size set by default, we call it Intrinsic Size.

In the example above, the default sizes are applied to the image and paragraph elements.

1.2 Extrinsic Size

If we set a Specific Size to an element, we call an Extrinsic Size.

In the example above, a specific size was given to the image and paragraph elements.

2. Handling Overflow

2.1 CSS Overflow Property

Content overflow can be handled using the CSS

overflow

property.

The overflow property has the following values:

visible
(default) - CSS tries to avoid data loss. Hence, the
overflow: visible;
is the default value for it.
hidden
- The overflow is clipped, and the rest of the content will be invisible.
scroll
- The overflow is clipped, and a scrollbar is added to see the rest of the content.
auto
- It is similar to
scroll
, but it adds scrollbars only when necessary.

Try out CSS

overflow

property with different values in the below Code Playground.

2.2 overflow-x & overflow-y

There are two other CSS properties similar to

overflow

, which is used for handling in any one particular direction.

overflow-x
- To handle overflow in the horizontal direction.
overflow-y
- To handle overflow in the vertical direction.

3. Min & Max Sizes

3.1 Min size

The
min-height
&
min-width
CSS properties can be used to define the minimum sizes of an element.
.paragraph {
min-height: 150px;
}
CSS

3.2 Max size

The
max-height
&
max-width
CSS properties can be used to restrict the sizes of an element.
.paragraph {
min-height: 150px;
max-height: 180px;
}
CSS

3.3 Min & Max Sizes with Overflow

If the content needs a larger than maximum height, the overflowing of content can be observed.

.paragraph {
  border: 2px solid blue;
  width: 150px;
  min-height: 150px;
  max-height: 180px;
  overflow: auto;
}

4. A Note on Meta Element

1
2
3
4
5
6
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
</html>

HTML

The

Sizing Elements and Handling Overflow in CSS Flexbox

1.1 Intrinsic Size

1.2 Extrinsic Size

2. Handling Overflow

2.1 CSS Overflow Property

2.2 overflow-x & overflow-y

3. Min & Max Sizes

3.1 Min size

The
min-height
&
min-width
CSS properties can be used to define the minimum sizes of an element.
.paragraph {
min-height: 150px;
}
CSS

3.2 Max size

The
max-height
&
max-width
CSS properties can be used to restrict the sizes of an element.
.paragraph {
min-height: 150px;
max-height: 180px;
}
CSS

3.3 Min & Max Sizes with Overflow

If the content needs a larger than maximum height, the overflowing of content can be observed.

4. A Note on Meta Element

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form

Sizing Elements and Handling Overflow in CSS Flexbox

1.1 Intrinsic Size

1.2 Extrinsic Size

2. Handling Overflow

2.1 CSS Overflow Property

2.2 overflow-x & overflow-y

3. Min & Max Sizes

3.1 Min size

The min-height & min-width CSS properties can be used to define the minimum sizes of an element.123.paragraph { min-height: 150px;}CSS

3.2 Max size

The max-height & max-width CSS properties can be used to restrict the sizes of an element.1234.paragraph { min-height: 150px; max-height: 180px;}CSS

3.3 Min & Max Sizes with Overflow

If the content needs a larger than maximum height, the overflowing of content can be observed.

4. A Note on Meta Element

Post a Comment

Contact Form

The
min-height
&
min-width
CSS properties can be used to define the minimum sizes of an element.
.paragraph {
min-height: 150px;
}
CSS

The
max-height
&
max-width
CSS properties can be used to restrict the sizes of an element.
.paragraph {
min-height: 150px;
max-height: 180px;
}
CSS