CSS min-width Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.demo {
  max-width: 800px;
  margin: 24px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 16px;
}

.controls {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid #ddd;
  padding: 12px;
  background: #fafafa;
}

.box {
  flex: 1 1 0;
  padding: 12px;
  background: linear-gradient(180deg,#fff,#f6f8fa);
  border: 1px solid #ccc;
  text-align: center;
}

.box-no-min {
  min-width: 0; /* allows shrinking */
}

.box-min {
  min-width: 150px;
}

.hint {
  color: #555;
  margin-top: 12px;
  font-size: 14px;
}
</style></head><body><div class="demo">
  <h2>CSS min-width demo</h2>
  <div class="controls">
    <div class="box box-no-min">
      <p>Without min-width</p>
      <p>Will shrink below 150px</p>
    </div>
    <div class="box box-min">
      <p>With min-width: 150px</p>
      <p>Will not shrink below 150px</p>
    </div>
  </div>
  <p class="hint">Resize the window to see how the right box respects min-width.</p>
</div></body></html>