Intrinsic Sizing In CSS, by Ahmad Shadeed

Two dimensions exist in CSS: intrinsic and extrinsic. The most common way to do this is to set a fixed attribute value for the width and height of an element, which is the external dimension. Internal dimensions, on the other hand, are determined by the amount of internal content contained in an element.

This article will take a look at each of the values that control the intrinsic size and see what benefits can be gained from their use. I’ll also illustrate how these values can be used in conjunction with CSS Grid layouts/other properties.

The external size

External dimensions refer to specifying element dimensions with precise values. Here’s an example:

.c-button {
    width: 100px;
}
Copy the code

The size of this button is 100px, that’s the external size. Another example is a

element, which by default is a block-level element, meaning its width defaults to 100% of the parent element’s width.

Sometimes, we want to set the size based on the actual content of the element, and in this case, using the external size is useless. Next, let’s look at how to use intrinsic property values to solve the problem.

min-content

The min-content value represents the intrinsic minimum width, which is equal to the width of the longest word in the element’s content.

CSS Working Group (CSSWG)

The inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

Frankly, I understand CSSWG’s definition of this concept too well. My own understanding is that I have wrapped a box around the element, and the element content (many words) will be folded, and the width of the box will be equal to the longest word in the element. If I’m wrong here, I want you to correct me.

For example, there is a title element:

<h2>A title for an awesome article</h2>
Copy the code
h2 {
  width: min-content;
}
Copy the code



width
min-content

A pen by Ahmad Shadeed

max-content

Max-content represents the intrinsic preferred width of an element, which is equal to the width of the element’s content.

Here’s another example of a title element, this time using max-content:

h2 {
  width: max-content;
}
Copy the code



fit-cotent

This property can be thought of as a combination of min-content and max-content. While searching, I found this answer on Stackoverflow that I liked:

Fit-content Allows max-content to be used. If available < max-content, use available; If available < min-content, use min-content.

Draw a flow diagram that looks like this:


🤔 up
The flow chart above is less clear than the answer on Stackoverflow, which is easier to understand. The answer on Stackoverflow is as follows:



fit-contentThe value of an attribute depends on the available space of the current element.



1. If space is available, use your element’smax-conetntSo what? There’s enough for you.

2. If the available space is not sufficient, thanmax-conetntSmall, then use the value of the available space, this is fit, does not cause content to cross the line.

3. If there is little available space, it is even better thanmin-conetntIt’s still small. I’m sorry. You have tomin-contentOtherwise, the display will be ugly and inappropriate.

Let’s take an example of how it works.

h2 {
    width: fit-content;
}
Copy the code

Check out the GIF below to see how the title size adjusts as the viewport changes.

Let’s review fit-content: width is equal to max-content if the current available space is larger than max-content; If the available space is smaller than max-content, then width equals the available space; Finally, if the available space is less than min-content, then width is equal to min-content.

So far, I’ve explained every intrinsic value. Let’s turn to a real case.

Use case

<figure> 和 <caption>

Now let’s assume that we have a

with a < Caption >. Because it’s a block-level element, it defaults to 100% of the parent element’s width.

<figure> <img src="blueberry-cheesecake-x.png" alt=""> <figcaption>.. </figcaption> </figure>Copy the code



<figure>
max-content
<figure> 

figure {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
Copy the code



<figure>

To solve this problem, we need to use fit-content for our images. It does not allow large images to be displayed outside the viewport.

figure {
    width: fit-content;
}
Copy the code

A pen by Ahmad Shadeed

Delimited title

In this example, “Top Stories” is folded into two lines. The width is still dynamic, meaning that it needs to be folded regardless of the actual title. To achieve this effect, we can use min-content.

span {
    width: min-content;
}
Copy the code

A pen by Ahmad Shadeed

Underlined titles

Another interesting use case for intrinsic values is for a title with a border, requiring that the border be as long as the content of the title. Consider the following:

Notice that the title is a block element. To achieve this effect, the previous approach was to wrap the content in a tag and give a border effect.

<h2><span>A title for an awesome article</span></h2>
Copy the code
<h2><span>A title for an awesome article</span></h2>
Copy the code

Of course, we can also use fit-content to make the title as wide as the content.

h2 {
    width: fit-content;
    margin-left: auto; /* For centering */
    margin-left: auto; /* For centering */
    border-bottom: 2px solid #e2deed;
}
Copy the code

A pen by Ahmad Shadeed

navigation



max-content 

.c-nav {
    width: max-content;
}
Copy the code

Demo

Todo list

I was looking for intrinsic value use cases online when I came across an article that caught my eye.

Consider the following example:

The Todo list contains: header, list, and footer.

No matter how many list items there are, the height of the middle section should be 100% – header-footer. To achieve this effect, we can use a CSS Grid with a min-content.

.c-todo {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}
Copy the code



min-content

The chat window

Imagine building a chat program. In the following example, the layout structure is very similar to that of a Todo list. When there is no \ chat record and min-content is not used, the layout is broken.

Demo

Hero

Suppose our page

contains a Hero component. Our goal is for the Hero component to be dynamically laid out and take up the rest of the screen.

.c-section {
    display: grid;
    grid-template-rows: min-content 1fr;
}
Copy the code

There are two lines of content. The first line uses the minimum content height, and the second line expands and fills the remaining free space.

A pen by Ahmad Shadeed

The Sidebar and the Main

I always wondered why we had to give the sidebar a fixed width. What if its width is content-based? For example, it has a content-based minimum width and a content-based maximum width, right? Let’s try it.

<div class="wrapper">
  <aside></aside>
  <main></main>
</div>
Copy the code
.wrapper {
    grid-template-columns: fit-content(150px) 1fr;
    grid-gap: 1rem;
}
Copy the code

By using the CSS Grid Fit-Content function, we can ensure that the sidebar is no more than 150px wide and can be reduced to less than 150px if the content is very short.

When the sidebar has very little content, it shrinks a bit:

🤔 up

The fit-content() of this is not mentioned in the article. It can be easily understood as follows:

When this function is used, the parameter is usually less than the max-content value of the element. For example, fit-content(150px) is less than the value of the element max-content. In this case, the final render size of the element is between min-content and 150px. If there is enough free space, display a maximum of 150px. If there is less free space, select a value between min-content and 150px. If there is not enough free space (less than min-content), So I’m going to use min-content, which can’t be any smaller.

Of course, if the value in fit-content() is larger than the element max-content, then the final render size of the element is between min-content and max-content. The exact amount depends on the current available space, similar to the above.

Anyway, the minimum value returned by fit-content() is min-content, and can’t be smaller than min-content.

For more information, see the fit-Content () document on MDN.

Title and Description

We have a title and a description text. Description text must not be wider than the width of the main heading. To me, this is an interesting use case that I didn’t think was possible with CSS alone.

Look at the model below.

To do this, we need to set min-content to the width of the wrapping element and width: max-Content for the header element.

section {
  width: min-content;
  margin: 0 auto;
  text-align: center;
}

h2 {
  width: max-content;
}
Copy the code

Please note that the above code needs to be adjusted on the mobile side, otherwise it may cause the horizontal scroll bar to appear.

A pen by Ahmad Shadeed

Browser compatibility

According to Can I Use data, all major browsers except Microsoft Edge (EdgeHTML) now support built-in values.

Note: Microsoft Edge (Chromium) has been supported since the first release (79).

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)