Установить свойство min-width css на `max-content` после вычисления / выполнения обтекания переполнения?

Question

Что ж, для гибкого блока (или сетки) я использую sh, чтобы убедиться, что содержимое всегда помещается внутри сетки. Однако сетка должна сжаться, если это возможно. Таким образом, сетка определяется как:

.grid: {
    gridTemplateColumns: 'max-content 1fr',
    border-top-color: black;
    border-top-width: 1;
    border-top-style: solid;
    border-left-color: black;
    border-left-width: 1;
    border-left-style: solid;
}
.grid-cell: {
    border-bottom-color: black;
    border-bottom-width: 1;
    border-bottom-style: solid;
    border-right-color: black;
    border-right-width: 1;
    border-right-style: solid;
}
.rank: {
    grid-column: 1
.team: {
    min-width: "max-content";
    overflow-content: "break-words";
    gridColumn: 2;
}


<div class="grid">
    <div class="grid-cell rank">rank</div>
    <div class="grid-cell team">team</div>
    <div class="grid-cell">generated column 1</div>
    <div class="grid-cell">generated column 2</div>

    <div class="grid-cell rank">1</div>
    <div class="grid-cell team">Lorem ipsum dolor sit amet</div>
    <div class="grid-cell">Values in column 1</div>
    <div class="grid-cell">Values in column 2</div>
</div>

Однако эта функция прекратит «сжиматься» в тот момент, когда ширина сетки станет размером всей строки. Несмотря на то, что строка могла бы сузиться дальше, заключив слова в оболочку.

Я мог бы удалить минимальную ширину. Однако это может привести к сокращению сетки даже «ниже» максимального размера слова и, таким образом, к перекрытию ячеек.

Можно ли сделать так, чтобы минимальная ширина div была равна максимальному слову, и он оборачивает слова?

Answer 1

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

.grid { /* remove colon */
  display: grid; /* Add display grid */
  grid-template-columns: auto 1fr; /* gridTemplateColumns to grid-template-columns */
  border-top-color: black;
  border-top-width: 1;
  border-top-style: solid;
  border-left-color: black;
  border-left-width: 1;
  border-left-style: solid;
}

.grid-cell { /* remove colon */
  border-bottom-color: black;
  border-bottom-width: 1;
  border-bottom-style: solid;
  border-right-color: black;
  border-right-width: 1;
  border-right-style: solid;
}

.rank { /* remove colon */
  grid-column: 1; /* Add semicolon */
} /* close parenthesis */

.team { /* remove colon */
  /*min-width: "max-content";
  overflow-wrap: "break-word"; *//* overflow-content to overflow-wrap */
  grid-column: 2; /* gridColumn to grid-column*/
}

<div class="grid">
  <div class="grid-cell rank">rank</div>
  <div class="grid-cell team">team</div>
  <div class="grid-cell">generated column 1</div>
  <div class="grid-cell">generated column 2</div>

  <div class="grid-cell rank">1</div>
  <div class="grid-cell team">Lorem ipsum dolor sit amet</div>
  <div class="grid-cell">Values in column 1</div>
  <div class="grid-cell">Values in column 2</div>
</div>