Web technology: CSS minimum and maximum (width/height) points and pros and cons

Author: Ahmad Shaded by SitePoint

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

In general, we want to limit the width of an element relative to its parent, while making it dynamic. Thus, the ability to have a base width or height allows it to expand from the base to the available space. For example, if we have a button, its width should be minimal, not less than its width. This is where the maximum and minimum properties come in handy.

In this article, we’ll look at the maximum and minimum width and height properties of CSS in detail, and explain each property in detail using possible use cases and tricks.

The width attribute

The first thing to discuss is the width-related attributes. We have min-width and max-width, and each of them is important and has its own use case.

Min Width

When setting the value of min-width, the benefit is to prevent the value used by the width property from becoming less than the value specified by min-width. Note that the default value for min-width is auto, which resolves to 0.

Let’s take a basic example to illustrate this point.

We have a button with a changing text inside. Text can range from one word to more than one word. To ensure that even if there is only one word, it has a minimum width, min-width should be used.

The minimum width is 100px, so that even if the button’s content is short, like Done, or has only one icon, it’s still big enough to be noticed. This is very important when using multilingual sites such as Arabic. Consider the following example from Twitter:

In previous cases, the button had the word “تم” on it, indicating completion. The width of the button is too small, so IN the later case, I increased its minimum width.

Min – width and padding

In the case of long content, min-width can extend the width of the button, while horizontal padding should be added to achieve a proper appearance of the button.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Max Width

When setting a max-width value, it has the advantage of preventing the width property from using more than the value specified by max-width. The default value of max-width is None.

A common and simple use case for max-width is to use it with images. Consider the following example:

The image is larger than its parent element. By using max-width: 100%, the width of the image will not exceed the width of its parent image. If the image is smaller than the parent image, then max-width: 100% does not actually affect the image because it is smaller than the parent image.

Use a minimum width and a maximum width

When both min-width and max-width are used for one element, which of them will override the other? In other words, which has a higher priority?

html

<div class="wrapper">
  <div class="sub"></div>
</div>
Copy the code

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}
Copy the code

The initial width is 100px and the min-width and max-width values are added to it. The result is that the width of the element does not exceed 50% of the block/parent it contains.

Height attribute

In addition to the minimum and maximum width attributes, we have the same attributes as height.

min-height

When setting the value of min-height, the advantage is to prevent the height attribute from being used from becoming less than the specified value of min-height. Note that the default value for minimum height is auto, which resolves to 0.

Let’s use a simple example to demonstrate this.

We have a section with descriptive text. The goal is to set a minimum height for the section so that it can handle short or long content. Consider the following base case

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}
Copy the code

The minimum height is 100px, and with Flexbox, the content is centered horizontally and vertically. What happens if it’s longer? Like a paragraph?

Yes, you guessed it! The height of the section expands to contain the new content. With it, we can build flexible components and respond to their content.

Codepen. IO /shadeed/pen…

max-height

When setting max-height, it has the advantage of preventing the height property from using more than the value specified by max-height. Note that max-height defaults to None.

Consider the following example, where I set max-height for the content. However, because it is larger than the specified space, an overflow occurs. Therefore, the text goes beyond its parent boundary.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Use cases for minimum and maximum properties

We’ll cover some common and uncommon use cases for min-width, min-height, max-width, and max-height.

The tag list

When there is a tag list, it is recommended to limit the minimum width of a tag so that if its content is short, its appearance will not be affected.

By having this flexibility, tags will look good no matter how short the content is. But what happens if the content author enters a very long tag name, and the content management system he uses does not have a maximum character length for the tag? We can also use max-width.

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}
Copy the code

By using max-width, the label width is limited to a specific value. However, this is not enough; the tag name should be truncated.

IO /shadeed/pen…

button

There are different use cases for the minimum and maximum value of the button, because there are many variations of the button component. Consider the following diagram:

Notice that the “Get” width of the button is too small. If you don’t set the minimum width, the situation can get worse when there is no text for any reason. In this case, setting the minimum width is important.

use`flexbox`Set the minimum width to zero

The default value for min-width is auto, which is evaluated to 0. When an element is a Flex item, the value of min-width does not evaluate to zero. The minimum size of a Flex project equals the size of its content.

According to the CSSWG:

By default, Flex projects do not shrink below their minimum content size (the length of the longest word or fixed-size element). To change this setting, set the min-width or min-height property.

Consider the following example

The person’s name had a long word, which caused the overflow and horizontal scrolling. Nevertheless, I truncated it by adding the following CSS to the title

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

Since title is a Flex project, the solution is to reset the min-width and force it to zero.

.c-person__name {
    /*Other styles*/
    min-width: 0;
}
Copy the code

Here’s what the restoration will look like

According to the CSSWG:

On items where overflow is visible on the spindle of an elastic item, specify the automatic minimum size when specified in the spindle min-size property of an elastic item.

This means that setting overflow to a value other than visible causes min-width to be evaluated as 0, which solves the problem of not setting min-width: 0.

Codepen. IO /shadeed/pen…

Use Flexbox to set the minimum height to zero

This is a less common problem than min-width, but it can happen. Just to be sure, the problem relates to elastic items that can’t be less than their content. The result is that the min-height value is set to the same length as the content.

Consider the following example:

Text in red should be clipped within the parent text. Because the panel body is a Flex project, its min-height is equal to its content. To prevent this, we should reset the minimum height. See what HTML and CSS look like.

HTML

<div class="c-panel"> <h2 class="c-panel__title"><! -- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><! -- Content --></div> </div> </div>Copy the code

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}
Copy the code

This resets the property by adding min-height: 0 to the panel body, and should now work fine.

Codepen. IO /shadeed/pen…

Mix the minimum width and maximum width

In some cases, we have an element with a minimum width, but at the same time, it doesn’t have a maximum width. This might cause the component to be too wide, and we don’t want to do that. Consider the following example

Since widths are defined in pixels, there is no guarantee that the above method will work for mobile viewports. To solve this problem, we can use percentages instead of pixels as the minimum and maximum attributes. Consider the following example with an article body.

I added the following CSS to the image:

img {
  min-width: 35%;
  max-width: 70%;
}
Copy the code

Codepen. IO /shadeed/pen…

#### page wrapper/container

One of the most common ‘max-width’ use cases is a page wrapper or container. By adding the maximum width to the page, we can ensure that the content is readable and easy to navigate for the user.

Here is an example of a wrapper that is centered with horizontal padding on the left and right sides.

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}
Copy the code

Maximum width sum`ch`unit

Ch is a size relative to the number 0, and 1ch is the width of the number 0. If you define a width of 3ch, you can only fit three zeros.

<! <div> </div> /* CSS code */ div {width: 3ch; background: powderblue; }Copy the code

In the previous wrapper element example, we could use the CH unit because it is an article body.

.wrapper {
    max-width: 70ch;
    /* Other styles */
}
Copy the code

Animate elements whose height is unknown

In some cases, we were challenged to make accordion or mobile menus with unexpected content heights. In this case, max-height may be a good solution.

Consider the following example:

After clicking the menu button, the menu should slide from top to bottom with the animation. Without a fixed height (not recommended), this is not possible unless JavaScript is used. However, for max-height, this is possible. The idea is to add a large value for height, such as max-height: 20rem, which may not be achievable, and then we can use an animation to transform from max-height: 0 to max-height: 20rem.

.c-nav { max-height: 0; overflow: hidden; The transition: 0.3 s linear; } .c-nav.is-active { max-height: 22rem; }Copy the code

Click the menu button to see the animation in action.

Codepen. IO /shadeed/pen…

Minimum height of the Hero element

In general, I don’t like to add fixed heights to elements. I feel that doing so destroys the structure of streaming layouts. But there are situations where a fixed height is useful.

Consider the following example, where we have a Hero section with a fixed height set.

Yes, when the content is long, it overflows and leaves the Hero wrapper, which is not good.

To solve this problem in advance, we can use min-height instead of height. We can solve the problem in this way first, although it may cause the page to look strange, but I think it’s best to prevent this from happening in a content management system (CMS) in the first place. So, problem solved, and it looks good.

The issue of content overflow is not just whether content is larger than a fixed hero height. It can occur in screen sizing as a result of text wrapping.

If you use min-height, this will not happen at all.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Modal components

For modal components, it requires a minimum and maximum width so that it can be adapted from a mobile device to a PC’s screen.

Idea 1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}
Copy the code

Idea 2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}
Copy the code

For me, I prefer the second thought because I only need to define it max-width: 600px. Modal is a

element, so it already has 100% of the width of its parent element, right?

Consider the following simplified test case for modal design. Notice how the width changes to 100% of its parent if there is insufficient viewport space available.

Codepen. IO /shadeed/pen…

Minimum height and sticky footer

When a site’s content isn’t long enough, it wants to see the footer stick to the bottom. Let’s use a visual example to better illustrate this point.

Notice that the footer is not pasted at the end of the browser window. That’s because the content isn’t long enough to reach the height of the browser window. After repair, it should look like this:

First, make the body element a Flexbox container, and then set its minimum height to 100% of the viewport height.

Codepen. IO /shadeed/pen…

Maximum width/height and fluid ratio in viewport units

To enable the scale container to scale in response to the viewport size, a padding hack is introduced. Now we can mimic the same behavior by combining viewport units and maximum width/height in CSS.

We have a 644 by 1000 pixel image. To make it smooth, we need the following:

Aspect ratio: height/width
Container width: either a fixed number or a dynamic number (100%)
Set up theheightIs 100% of the viewport width times the aspect ratio
Set up themax-heigh, the height is the width of the container times the aspect ratio
max-widthSet to equal the container width

Talented people’s [three] is the biggest power of wisdom to share, if there is any mistake or suggestion in this blog, welcome talented people to leave a comment, finally, thank you for watching.

Original: www.impressivewebs.com/min-max-wid…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.

Web technology: CSS minimum and maximum (width/height) points and pros and cons

The width attribute

Min Width

Min – width and padding

Max Width

Use a minimum width and a maximum width

Height attribute

min-height

max-height

Use cases for minimum and maximum properties

The tag list

button

useflexboxSet the minimum width to zero

Use Flexbox to set the minimum height to zero

Mix the minimum width and maximum width

Maximum width sumchunit

Animate elements whose height is unknown

Minimum height of the Hero element

Modal components

Minimum height and sticky footer

Maximum width/height and fluid ratio in viewport units

communication

Related Posts

CSS basics review day 4

Have to read the electron version 12.0 update log

Why would Redux return to a new state-induced murder

use`flexbox`Set the minimum width to zero

Maximum width sum`ch`unit