How to set a max-width as percent AND pixels?

Question

How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.

If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.

Answer 1

width:20%; max-width:100px; 

This sets the width to 20% but caps it at 100 px.

Answer 2

One way to accomplish this is to simply use two divs

<div class="outer">   <div class="inner">     This content will not exceed 100px or 20% width.   </div> </div>  <style> .outer {   max-width: 90%; } .inner {   max-width: 100px; } </style>