Max-width initial not working in IE?

This problem with max-width initial not working in Internet Explorer was bugging me every time I was working on a project and it seems a lot of people are complaining too over the internet.

The action occurs whenever you are trying to overwrite the CSS width or max-width property from a certain amount of pixels or percent to the initial point. Doesn't matter if you are using it inside responsive meta tags or simple, it just doesn't work to cancel or overwrite this property.

Video Tutorial

The Problem (max-width initial not working)

As an example, we have a container with 200 pixels width for a big desktop. If we want to disable the max-width on a lower resolution, using initial value, will not work at all.

.someDiv {
	max-width: 200px;
}

@media (max-width: 1366px) {
	.someDiv {
		max-width: initial;
	}
}

The Fix

In this case we can use max-width: inherit to retrieve the original value the same as the parent container, instead of using initial. This trick will work in Internet Explorer and Firefox (if you have problems there too).

.someDiv {
	max-width: inherit;
}

Now your max-width property will be overwritten without any problems on mobile or any other cases. So, next time max-width initial not working in IE, try this tip.

Don't forget that this rule applies the same for height, width and max-height properties. Example above was tested using Internet Explorer 11.

Live Demo