title: How to combine a min-width with a max-width that equals to 100% if needed in CSS?
body: <p>I'm looking for CSS rules that allow setting fixed element width (let's say <code>width: 500px</code>), but combines it with <code>max-width: 100%</code> if a container is narrower than the element.</p>
  <p>I'm thinking about something similar to:</p>
  <pre><code>.elem {
   width: 600px;
   max-width: 100%;
  }
  </code></pre>
  <p>This snippet works perfect - if a <code>.elem</code>'s container is narrower than the <code>.elem</code> itself, the <code>.elem</code> has container's width - smaller than <code>600px</code>.</p>
  <p>How to achieve the same effect with <code>min-width</code>? The following snippet doesn't work:</p>
  <pre><code>.elem {
   min-width: 600px;
   max-width: 100%;
  }
  </code></pre>
  <p>Maybe any ideas using CSS Grid or even JavaScript?</p>