Why doesn't max-width override min-width?

Because of the CSS standards:

The following algorithm describes how the two properties influence the used value of the 'width' property:

1. The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
2. If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
3. If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.

I know, I'm late ... But one exact solution could be this:

p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 50%;
    border: 1px solid blue;
    min-width: 350px;
}
@media (max-width: 700px) {
  p {
    width:100%;
    display:block;
  }
}