What is min-width: 100%; width: do cars really do?

Question

I found a good example of a full-screen video on CodePen: https://codepen.io/dudleystorey/pen/knqyK

I am having difficulty understanding the following styles:

video { min-width: 100%; min-height: 100%; width: auto; height: auto; } 

Why can't we just specify min-width and min-height? Why do we need to set the width and height to auto?

Answer 1

I tested it in Chrome and it works fine with the removed width: auto; properties width: auto; and height: auto; .

Perhaps you see an example of Cargo-Cult Programming (i.e. the code that exists because the programmer thought it was necessary, but in reality it is not necessary) - or it could be for an outdated browser error (if this is strange, so like all browsers that support <video> , all support a highly consistent CSS layout.

Answer 2

min-width:100% ensures that the element is no less than its container. width: auto allows an element to maintain its original size.

Thus, the combination of the two can be read as "let the element take up as much space as it needs if it is not less than the width of its container, in which case make it as wide as the container." So basically what the code says: "I don't care if it overflows, just make it fill the page."

There is no reason to add width:auto , since this is the initial value of width , if only to override any other CSS style applied to the element.

In this code example, min-width will be enough.

Answer 3

There is no good example where min-width:100% makes no sense to me.

Consider this:

 div{ width:100%; min-width:600px; } 

In this case, if the width of the page or container div is less than 600 pixels, say 400 pixels. In this case, it will set the div width to 600 pixels and add a scroll bar - which is more than 100%

Answer 4

Width: Auto

The original width of a block level element, such as div or p, is automatic. This makes it expandable to occupy all available horizontal spaces within its containing block. If it has a horizontal pad or border whose width is not added to the total width of the element.

Width 100%

On the other hand, if you specify the width: 100%, then the total number of elements the width will be 100% of its containing block plus any horizontal margin, padding and border (if you did not use the box size: border-box, in which only quotas are added to 100% for changing the way its total width). It may be what you want, but most likely it is not.

Min width:

The min-width property in CSS is used to set the minimum width of the specified element. The min-width property always overrides the width property that runs before or after the width in the declaration.

And some links below for further reference and clarification

/img/37a4ac0af15ec63b51c57fbd8b6a0ed5.png

https://css-tricks.com/almanac/properties/m/min-width/

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/