<h2>[min-width] parent width: <span class="parent-width">?</span></h2>
parent Width change: <input type="range" id="width" name="width"
         min="200" max="500" onInput="onInput(event)">
<div class="parent">
  <div class="target">
    target width: <span class="target-width">?</span>
  </div>
</div>
body {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  align-items: center;
}
.parent {
  width: 300px;
  height: 150px;
  border: 2px solid pink;
}
.target {
  width: 50%;
  min-width: 200px;
  height: 100px;
  margin: 0 auto;
  background-color: rgb(240 220 220);
  border: 1px solid rgb(240 220 230);
  display: flex;
  align-items: center;
  justify-content: center;
}
#width {
  width: 300px;
}
const parent = document.querySelector('.parent');
const target = document.querySelector('.target');
const targetWidth = document.querySelector('.target-width');
const parentWidth = document.querySelector('.parent-width');

function onInput(e) {
  parent.style.width = `${e.target.value}px`;
  parentWidth.innerText = e.target.value;
  targetWidth.innerText = target.clientWidth;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.