CSS Grid: сделайте сетку-ячейку шириной не более max-content, но никогда не шире 1fr. Или display: flex сможет это решить?

ProgramBox

CSS Grid: сделайте сетку-ячейку шириной не более max-content, но никогда не шире 1fr. Или display: flex сможет это решить?

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#css #css-grid

Вопрос:

Как мне сделать так, чтобы ячейка в сетке была такой же широкой, как и ее max-content , но никогда не переполняла родительский контейнер сетки?

Проверьте этот пример:

 .grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content max-content;
  width: 120px;
}

label {
  background-color: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>

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

Если я установлю для нее значение 1fr вместо max-content , метка будет охватывать всю остальную часть контейнера, что нежелательно, потому что теперь вы можете переключить флажок, щелкнув пробел справа от метки.

 .grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content 1fr;
  width: 120px;
}

label {
  background-color: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>

CSS предложит решение здесь

 min(max-content, 1fr)

но, к сожалению max-content , не может быть использован в min() -функции.

1. Я не уверен, что вы подразумеваете под » Если я установлю значение 1fr вместо max-content, […] теперь вы можете переключить флажок, щелкнув пробел справа от метки». ? В вашем втором фрагменте единственный способ, которым я могу переключить флажок, — это щелкнуть по желтой части (или, очевидно, самому флажку!)

2. Желтая часть, в которой нет букв, по-прежнему остается пробелом, независимо от цвета. Термин пробел ничего не говорит о цвете.

3. Ах, теперь я понимаю — я понимаю, что «пробел» не обязательно означает белый (я сам много раз комментировал этот эффект здесь)… Я думал, вы имели в виду первую метку, в которой не было пробелов, поэтому я был в замешательстве 🙂

Ответ №1:

Вы можете использовать fit-content(100%) ^ссылку

 .grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content fit-content(100%);
  width: 120px;
}

label {
  background-color: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>

С flexbox это тривиальная задача, потому что все, что вам нужно, это сделать элемент контейнером flexbox:

 .grid {
  border: 1px dotted blue;
  display: flex;
  gap: 5px;
  width: 120px;
}

label {
  background-color: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>

Ответ №2:

Поиграв с фрагментом, я нашел рабочее решение, используя

 justify-self: start;
max-width: 100%;

наряду с 1fr для столбца label:

 .grid {
  border: 1px dotted blue;
  display: grid;
  gap: 5px;
  grid-template-columns: min-content 1fr;
  width: 120px;
}

label {
  background-color: yellow;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 <div class="grid">
  <input type="checkbox" id="foo" /><label for="foo">foo label, must not overflow parent grid!</label>
</div>

<div class="grid">
  <input type="checkbox" id="bar" /><label for="bar">bar label</label>
</div>