CSS, Idiom for Preferred min width-CodePudding

I have learned from similar questions that min-width always beats max-width, which is unfortunate, because I think modern websites mostly require it the other way around.

I often have to resort to media queries to solve the below problem, but hoping there is an elegant/better solution:

Say I have a div:

<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>

I often wish to have this div width to be at least 500px, as long as it's not bigger than 90% of the screen width. This can be accomplished with:

div {
    min-width: 500px;
    max-width: 90vw;
}

Now the problem with the above is it overflows on mobile. I encounter this all time when I have a list of objects, and say the items are deletable, then if one deletes the widest element, the whole design jumps as it resizes. To minimize this effect, I wish to have a default width and allow it to expand in rare cases as needed.

CodePudding user response：

Do it like below:

div {
  min-width: min(500px, 100%); /* will take less than 500px if there is an overflow */
  max-width: 90vw;
  border:1px solid;
}

<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>

CodePudding user response：

Are you looking to set the min-width to no more than 90% of the width of the screen but if the screen is wide enough then 500px.

If so maybe try:

div {
  min-width: min(500px, 90vw);
  display: inline-block;
  background-color: lime;
}

<div>Some text </div>