1

Just A quick question: Why is it that when you specify a max-width with a specified pixel value and then have a width of 100%, what is the effect of having a width of 100% even though there is already a max-width with a specified value and as the smaller screen decreases the max-width will just take care of it since it will just have an auto right.

For example: when you have a container let's say has width of 500px and then a child element has a max-width of 300px and then width of 100%, what does having a width of 100% actually affects on the child element?

Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
marco narca
  • 19
  • 6

3 Answers3

2

max-width and width are 2 different CSS properties and have good use together. If you want to set a fixed width for most of the screen sizes but still you want to set a max limit where you want to stop rendering that fixed width, you can use both of these properties together. For example: Let's say I have a header which I want to have 100% width for most smaller screens but for much bigger screens, I don't want to cover the 100% width. Rather, I want to limit it at a specific width and let's say 1200px. Then I can write the codes below. You will see it will cover 100% of the width for smaller screens but when the viewport width is getting bigger it will stop at 1200px and will not cover the 100% of the screen anymore.

*{
    margin: 0;
    padding: 0;
}

header{
    max-width: 1200px;
    width: 100%;
}
<header style="background-color: red; height: 100px; margin: 0 auto;"></header>
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
1

For example, on this CSS code:

.content { 
  width: 100%;
  max-width: 1200px; 
  margin: 0 auto; 
}

The .content will always try to be as wide as its container (because of width: 100%). But once the container exceeds 1200px, .content won’t grow any further because of the max-width: 1200px. The margin: 0 auto centers .content when the screen width is larger than 1200px.

Basically, width: 100% ensures the element is flexible on smaller screens, while max-width ensures it remains beautiful and doesn’t stretch too much on larger screens.

Hope that you are clear with this.

Xab Ion
  • 1,105
  • 1
  • 11
  • 20
1

The relationship and effect of width: 100% used with max-width depends on the context that it's used with. The default value of block-level elements is width: 100%, therefore that declaration is redundant unless it is overruling another inherited value.

A possible scenario could involve replaced elements, such as images. The default width is its intrinsic value (even if given display: block). To give an image a responsive fit and keep its intrinsic aspect ratio, give it width: 100% (height: auto is the default and wouldn't need to be declared unless overruling another inherited value.)

This allows the image to shrink to fit, but it will also increase its size to fit. To prevent the image from exceeding a specific (possibly intrinsic) size, declare max-width.


Using this example:

  • parent element width: 500px and not responsive
  • child element width: 100% and max-width: 300px

The child element will either reduce or increase its width and is equivalent to having used width: 300px. It will always be 300px wide.

However, if the parent element is responsive (such as a flexbox item), then the child element will be responsive and can shrink below 300px while keeping its aspect ratio. This is demonstrated in the snippet.

section {
  display: flex;
  background-color: aliceblue;
}

div {
  width: 500px;
}

img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: auto;
}

p {
  padding: 1em;
}
<section>
  <div>
    <img src="//picsum.photos/400" alt="placeholder photo">
  </div>
  <p>The randomly-generated placeholder photo has an intrinsic size of 400px by 400px. However, its rendered size is limited to 300px and is allowed to shrink in narrow viewports.</p>
</section>
Tim R
  • 2,622
  • 1
  • 3
  • 19