CSS - max-block-size Property: A Friendly Guide for Beginners

Hello there, future CSS wizards! Today, we're going to embark on an exciting journey into the world of CSS, specifically exploring the max-block-size property. Don't worry if you're new to this; I'll be your friendly guide, and we'll tackle this topic step by step. So, grab your favorite beverage, get comfortable, and let's dive in!

CSS - Max Block Size

What is max-block-size?

Before we jump into the nitty-gritty, let's understand what max-block-size is all about. Imagine you're building a tower with blocks. The max-block-size property is like setting a limit on how tall your tower can get. In CSS terms, it defines the maximum size of an element in the block direction.

"But wait," you might ask, "what's the block direction?" Great question! The block direction is typically the vertical direction in languages written horizontally (like English), and the horizontal direction in languages written vertically (like traditional Japanese).

Syntax and Possible Values

Let's look at how we can use max-block-size in our CSS:

.my-element {
  max-block-size: value;
}

Now, what can we put in place of "value"? Here's a handy table with all the possible values:

Value	Description
`<length>`	A fixed length, like `300px` or `20em`
`<percentage>`	A percentage of the containing block's size
`none`	No limit (this is the default)
`max-content`	The intrinsic preferred max size
`min-content`	The intrinsic minimum size
`fit-content`	Similar to `auto`, but with some differences
`auto`	The browser decides the max size

Applies To

Not all CSS properties apply to every HTML element. The max-block-size property applies to all elements except:

Non-replaced inline elements
Table rows
Row groups

Don't worry if you're not familiar with these terms yet. As you progress in your CSS journey, you'll encounter them and understand why they're exceptions.

CSS max-block-size - writing-mode Effects

Now, here's where things get interesting! The max-block-size property changes its behavior based on the writing-mode of the text. Let's look at some examples:

Example 1: Horizontal Writing Mode

.box {
  writing-mode: horizontal-tb;
  max-block-size: 200px;
  background-color: lightblue;
  padding: 10px;
}

<div class="box">
  This is a box with horizontal writing mode and max-block-size set to 200px.
</div>

In this example, max-block-size will limit the height of the box to 200 pixels because the block direction is vertical in horizontal writing mode.

Example 2: Vertical Writing Mode

.box {
  writing-mode: vertical-rl;
  max-block-size: 200px;
  background-color: lightgreen;
  padding: 10px;
}

<div class="box">
  This is a box with vertical writing mode and max-block-size set to 200px.
</div>

In this case, max-block-size will limit the width of the box to 200 pixels because the block direction is horizontal in vertical writing mode.

CSS max-block-size - Value

When we use a length value, we're setting a fixed maximum size. Let's see it in action:

.fixed-size {
  max-block-size: 150px;
  background-color: lightyellow;
  padding: 10px;
}

<div class="fixed-size">
  This box has a max-block-size of 150px. If the content exceeds this height, it will overflow.
</div>

In this example, no matter how much content we put in the div, it won't grow taller than 150 pixels.

CSS max-block-size - Value

Percentages are relative to the size of the containing block. Here's how it works:

.parent {
  height: 300px;
  background-color: lightgray;
}

.child {
  max-block-size: 50%;
  background-color: lightpink;
  padding: 10px;
}

<div class="parent">
  <div class="child">
    This child div has a max-block-size of 50% of its parent's height.
  </div>
</div>

In this case, the child div will never be taller than half the height of its parent.

CSS max-block-size - Value

The max-content value is particularly useful when you want your element to be as large as its content requires, but no larger. Let's see an example:

.max-content-box {
  max-block-size: max-content;
  background-color: lightcoral;
  padding: 10px;
}

<div class="max-content-box">
  This box will expand to fit its content, but no more than that.
</div>

This box will grow to accommodate its content, but won't stretch beyond that.

CSS max-block-size - With Horizontal and Vertical Text

Let's wrap up with an example that combines horizontal and vertical text:

.mixed-text {
  max-block-size: 200px;
  background-color: lavender;
  padding: 10px;
}

.vertical-text {
  writing-mode: vertical-rl;
  max-block-size: 100px;
  background-color: lightsalmon;
  margin-top: 10px;
}

<div class="mixed-text">
  This is horizontal text with max-block-size of 200px.
  <div class="vertical-text">
    This is vertical text with max-block-size of 100px.
  </div>
</div>

In this example, we have a container with horizontal text and a max height of 200px. Inside it, we have another div with vertical text and a max width of 100px.

And there you have it! We've explored the max-block-size property from various angles. Remember, the key to mastering CSS is practice. So, don't be afraid to experiment with these examples, modify them, and see what happens. Happy coding, and may your blocks always be the perfect size!

Credits: Image by storyset