Есть ли способ указать относительную ширину рамки и минимальную ширину содержимого?

Question

Есть ли способ применить разные размеры коробки к разным спецификациям ширины? Можно ли указать минимальную ширину для использования content-box и% width для использования border-box, или размер поля применяется ко всем спецификациям ширины элемента?

td,
th {
  border: 1px solid;
  width: 1px;
}

input {
  /* including padding and border */
  width: 100%;
  /* based on content only */
  min-width: 2em;
  /* box-sizing: border-box; */
  /* emphasized border to really show the issue. */
  border: 8px solid;
}

div {
  white-space: nowrap;
}

<table>
  <tr>
    <th>
      <div>Content that increases the width of the column</div>
    </th>
    <th>
      <div>...
        <!-- content less than the desired minimum width of the input element -->
      </div>
    </th>
  </tr>
  <tr>
    <td><input type="text" value="42" /></td>
    <td><input type="text" value="42" /></td>
  </tr>
</table>

В этом конкретном случае ввод должен заполнять ширину столбца, не выходя за его пределы. Раскомментирование размера окна исправляет это, но делает пространство содержимого ввода меньше желаемой минимальной ширины.

Answer 1

Вот решение JavaScript, которое я разработал до сих пор:

$("[style*='min-width']").each(function(ndx, elem) {
    $elem = $(elem);
    $elem.css("min-width", parseInt($elem.css("min-width").slice(0, -2)) + $(elem).outerWidth() - $(elem).width() + "px");
})

td,
th {
  border: 1px solid;
  width: 1px;
}

input {
  width: 100%;
  /* including padding and border */
  box-sizing: border-box;
  /* emphasized border to really show the issue. */
  border: 8px solid;
}

div {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      <div>Content that increases the width of the column</div>
    </th>
    <th>
      <div>...
        <!-- content less than the desired minimum width of the input element -->
      </div>
    </th>
  </tr>
  <tr>
    <td><input type="text" value="42" style="min-width: 2em;" /></td>
    <td><input type="text" value="42" style="min-width: 2em;" /></td>
  </tr>
</table>