flex: initial;

No Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Maybe

We

Need

A Few

More

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

flex: auto;

No Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Maybe

We

Need

A Few

More

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

flex: none;

No Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Maybe

We

Need

A Few

More

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

flex: 1;

No Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)

Wrap

Here

Are

A Few

Words

For

A Nav-Bar-Like

Thing

Maybe

We

Need

A Few

More

Here are longer sentences to see what happens when there is much more text. This starts to get into understanding min-content and max-content, and understanding how fluid text behaves.

Let's look at the CSS Intrinsic & Extrinsic Sizing Module Level 3

The min-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in a zero-sized containing block. (In other words, the minimum size it has when sized as “shrink-to-fit”.)

The max-content size of a box in each axis is the size it would have as an auto-sized (in that axis) float in an infinitely-sized containing block. (In other words, the maximum size it has when sized as “shrink-to-fit”.)