Emulate css min-width: min(max-content, 100px)

October 19, 2023

The task is to show a list of "label: value" entries where both label and value can overflow. The label should have at least 100px width if it does not fit. This is the initial attempt:

.fields {
  width: 300px;
  border: 1px solid #ddd;
}
.field {
  display: flex;
}
.label {
  flex: 0 1 auto;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.divider {
  flex: 0 0 10px;
}
.value {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}

<div class="fields">
  <div class="field">
    <div class="label">
      Long Long Long Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Simple Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      Regular Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      T
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>
</div>

It works except the last case when the label is short by itself. In this case it should not stretch to 100px. I failed to achieve this using min-content property. Logically, something like min-width: min(100px, min-content) should be used, but the combination of min and min-content is probably not supported. Is there any way to achieve the required behavior in CSS?

>Solution :

Define the 100px as the flex-basis then use max-width: max-content so your element will never get longer than its max-content. Now, make sure your label have a bigger grow priority compared to the value and a smaller shrink priority. In other words, the label need to take all the possible free space before shrinking

.fields {
  width: 300px;
  border: 1px solid #ddd;
}
.field {
  display: flex;
}
.label {
  flex: 99 1 100px;
  max-width: max-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.divider {
  flex: 0 0 10px;
}
.value {
  flex: 1 99 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}

<div class="fields">
  <div class="field">
    <div class="label">
      Long Long Long Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Simple Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      Regular Long Label
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>

  <div class="field">
    <div class="label">
      T
    </div>
    <div class="divider">:</div>
    <div class="value">
      Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value Long Value
    </div>
  </div>
</div>