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

Question

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.

Answer 1

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>

Answer 2

Firstly, I was adjusting your code and noticed that you have a few invalid values?

For example, nowrap seems to be invalid for property word-break. Instead, you could use white-space: nowrap;. The functionality you are going for should be the same.

Next, addressing your main question, Chrome's tabs seem to not really have a "gap," per se, but rather a fade-out/hiding effect. To incorporate something like this, you could use a CSS mask-image (Note that this might not work on older browser versions). These are pretty easy to adjust and the parameters should be pretty self explanatory.

-webkit-mask-image: linear-gradient(to right, gray 1%, transparent 100%);
mask-image: linear-gradient(to right, gray -50%, transparent 100%);

Here's a working snippet (I tweaked some things so I could see better):

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

#item {
  align-items: center;
  display: flex;
  background: red;
  min-width: auto;
  width: 100px;
}

span {
  margin-left: 5px;
  display: inline;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, gray 1%, transparent 100%);
  mask-image: linear-gradient(to right, gray -50%, transparent 100%);
  padding-right: 5px;
}

button {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

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