Issue with CSS min-width and max-width

Question

I have an unordered list like in the example demo

li {
  display: block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: 150px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child{
  width: 200px;
}

<ul>
  <li> first item </li>
  <li> second item very long content </li>
  <li> third item </li>
  <li> This is 200px wide</li>
</ul>

I want the li items to be at least 120px wide and at most 250px. If I don't set the width, they automatically set it to max-width. But if I set it to 150px like in the demo, then why doesn't the second one get its maximum allowed width, i.e. 250px even if its content doesn't fit into a single line?

Is there something I am missing? Can this be done with pure CSS?

Answer 1

A div takes by default 100% of its parent's width. So it will take the max-width.

To accomplish what you want, float them and clear both sides:

li {
  display: block;
  float: left;
  clear: both;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  min-width: 120px;
  max-width: 250px;
}
li:last-child {
  width: 200px;
}

<ul>
  <li>first item</li>
  <li>second item very long content</li>
  <li>third item</li>
  <li>This is 200px wide</li>
</ul>

Answer 2

The behaviour you want is possible if you wrap your <li> content inside a <div> container. You can then make the <div> containers inline-block along with width: auto; so that they don't conform to having identical lengths and thus you get the bordered boxes around your list elements to be determined by their content as shown in the snippet below.

li {
  list-style: none;
  margin: 5px;
}

li > div {
  display: inline-block;
  border: 1px solid lightCoral;
  width: auto;
  padding: 4px 6px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child > div{
  width: 200px;
}

<ul>
  <li><div> first item </div></li>
  <li><div> second item very long content </div></li>
  <li><div> third item </div></li>
  <li><div> This is 200px wide</div></li>
</ul>