[SOLVED] min-width to min-content of one child but shrink the other

min-width to min-content of one child but shrink the other

I'm trying to replicate the behaviour you have for a Chrome tab on windows.

The minimum width of the tab is set to the width of the close button and it will clip any text as the tab shrinks ensuring there is always a gap between any visible text and the close button.

Here is where I've gotten to:

https://jsfiddle.net/f7tc34q6/9/

#parent {
  background: grey;
  display: flex;
  height: 50px;
}

#item {
  align-items: center;
  display: flex;
  background: blue;
  min-width: fit-contents;
  width: 40px;
}

span {
  display: inline;
  min-width: 0;
  overflow: hidden;
  word-break: nowrap;
  padding-right: 5px;
}

button {
  display: block;
  width: 20px;
  height: 20px;
}

<div id="parent">
  <div id="item">
    <span>Text</span>
    <button></button>
  </div>
</div>

This isn't even close. The min-width: min-content doesn't behave, the text doesn't clip and there is no gap between the text and close button.

Solution

Update your code like below

#parent {
  background: grey;
  color: #fff;
  display: flex;
  gap: 5px;
  height: 50px;
}

.item {
  align-items: center;
  display: flex;
  background: blue;
  width: 40px;
  min-width: min-content;
}

span {
  width: 0; /* disable width contribution */
  flex: 1; /* take any remaining space */
  clip-path: inset(0 5px 0 0); /* simulate the gap and hide the overflow */
  white-space: nowrap;
}

button {
  width: 20px;
  aspect-ratio: 1;
}

<div id="parent">
  <div class="item">
    <span>Text example</span>
    <button></button>
  </div>
  <div class="item" style="width: 0px">
    <span>you don't see me</span>
    <button></button>
  </div>
  <div class="item" style="width: 90px">
    <span>another Text</span>
    <button></button>
  </div>
  <div class="item" style="width: 150px">
    <span>another Text</span>
    <button></button>
  </div>
</div>