How to prevent min-width overriding max-width?

Question

I've created a div that i want to be 50% (for arguments sake) but at least a certain width and at most 100% width, (so that it never extends the window)

.about {
    position:absolute;
    right:0;
    width: 50%;
    min-width: 500px;
    max-width: 100%;
}

Basically, i want the min-width to work, but i want the max-width to be considered MORE important so that it is never wider than the window, i assumed that i could do this by the order, or at least by using !important, but this doesn't seem to be the case

https://jsfiddle.net/ex716kam/2/

Answer 1

I've given it a few tries but I can't seem to make it work with CSS alone. I would recommend using simple javascript or media queries to make it work.

Working jsFiddle

@media screen and (min-width:1000px){
    .about{
        width:50%;
    }
}

Note what @lmgonzalves wrote about min-width being the "strongest"..