Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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).

    -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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search