How to set min width on content but still never exceed parent container width

Question

Is it possible to set minimum width for div but still respect parent container width.

Motivation: I need to have status div that if there is enough space in parents container, always have width of content width or at least 120px if content width is smaller. However if parent container is smaller than 120px, status div should not exceed maximum width of parent. In other words max-content: 100%. Below code of solution I tried.

The issue is that I can not set min-width: 120px, because it will always override max-width: 100% and overflow parent container if it is smaller than status div. I tried setting width: 120px, so max-width: 100% works in this case shrinking status container, but then I need to make sure that if parent container have more space for content that exceeds 120px, I use that space, so I set min-width: fit-content; This allows content to expand, but overflows in case of parent is smaller. It should act as in the last example instead. So how to achieve expected behavior with css only?

.parent {
  border: 1px solid blue;
  width: 200px;
  margin-bottom: 16px;
}

.status {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
  width: 120px;
  min-width: fit-content;
}

.status-demo {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <div>
    Parent width 200px. Content less than 120px, should expand to 120px.
  </div>
  <div class="parent">
    <div class="status status1"><span class="content">New</span></div>
  </div>
  <div>
    Parent width 200px. Content longer than 120px, should expand to content width.
  </div>
  <div class="parent">
    <div class="status status1">
      <span class="content">Longer thatn 120px content</span>
    </div>
  </div>
  <div>
    Parent width 200px. Content longer than 200px, should not exceed parents 200px.
  </div>
  <div class="parent">
    <div class="status">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
  <div>
    How above should actually behave
  </div>
  <div class="parent">
    <div class="status-demo">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
</div>

Answer 1

You need to set min-width, width, and max-width.
The trick is using
min-width: min(100%, 120px) so content wouldn't overflow when parent width is less than 120px
width: fit-content when content is wider than 120px but not wider than parent
max-width: 100% so content wouldn't overflow when it's wider than parent and wider than 120px

I added animation on parent width to demonstrate how it works with different widths.

.parent {
  border: 1px solid blue;
  width: 50px;
  margin-bottom: 16px;
  font-size: 16px;
  
  /* for the demo purpose */
  animation: breathe 6s 1s linear infinite alternate;
}

.content {
  min-width: min(100%, 120px);
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px red;
}


/* for the demo purpose */
@keyframes breathe {
  to {
    width: 300px
  }
}

<div>
  Content less than 120px, should expand to 120px or shrink to parent width.
</div>
<div class="parent">
  <div class="content">New</div>
</div>
<div>
  Content longer than 120px, should expand to content width while less than parent width.
</div>
<div class="parent">
  <div class="content">Longer than 120px</div>
</div>
<div>
  Content longer than parent width, should not exceed parents parent width.
</div>
<div class="parent">
  <div class="content">Content longer than 200px so should show not exceed parent</div>
</div>