width of element change between two values

user_10938220 0
Viewed 145

Is there any way to force an element to have one of our desire width values?

for instance : the min-width is 100px but if the element needs more space the next step was 200px, not the content it takes.

the purpose is switching between specific widths.

css
1 Answers

You can approximate this using clamp() like below:

Resize the wrapper to see the switch

.box {
  width: clamp(100px, (100% - 200px)*1000, 200px);
  background: red;
  height: 100px;
}

.wrapper {
  overflow: hidden;
  border: 2px solid;
  resize: horizontal;
}
<div class="wrapper">
  <div class="box"></div>

</div>

The logic is simple. If 100% is bigger than 200px, the difference mutiplied with 1000 will get bigger than 200px so the width is 200px. If 100% is maller than 200px, the difference is negative so smaller than 100px and we end with 100px.

user_86203330
Related