Stepped Resize

Container should resize in steps of Xpx when content is resized. I haven't gotten this to work, yet.

by godfrzero

HTML

<div class="stepper">
  <textarea name="resizeable">Resize me</textarea>
  <div class="step-gap"></div>
</div>

SCSS

.stepper {
  border: dashed thin black;
  container-type: inline-size;
}

textarea {
  width: 100%;
  resize: vertical;
}

.step-gap {
  --precision: 1000;
  --basis: 100cqh;
  --step-size: 50;
  --float-result: calc(var(--basis) / var(--step-size));
  --truncated-result: calc(var(--basis) / (var(--step-size) * var(--precision)));
  --integer-result: calc(var(--truncated-result) * var(--precision));
  --remainder: calc(var(--float-result) - var(--integer-result));
  
  height: calc(var(--remainder) * var(--steps-size));
  height: var(--float-result);
  border: dotted thin red;
  
  &:after {
    content: "Precision: (" var(--precision) ")";
  }
}