CSS - установить максимальную ширину элемента как кратное минимального содержимого - PullRequest
Новая
       26

CSS - установить максимальную ширину элемента как кратное минимального содержимого

0 голосов
/ 26 апреля 2020

TLDR; Я могу установить max-width элемента на min-content, но как мне установить min-content * n?

У меня есть элемент с динамически определяемым содержимым внутри контейнера. Страница просматривается в широком окне просмотра (ширина области просмотра> таблицы min-width). Примерно так: 

<section class="container">
  <div class="data"><!-- Some content here --></div>
</section>

.container {
  display: grid;
  justify-items: center;
  justify-content: stretch;
}
.data {
  min-width: min-content;
}

Я бы хотел, чтобы div растягивался по ширине, но только до некоторой степени. Опять же, содержимое div определяется динамически, поэтому я не могу установить фиксированное значение для max-width. Поэтому я хотел бы установить его max-width кратным min-width, что-то вроде этого: 

.data {
  min-width: min-content;
  max-width: calc(min-content * 1.5);
}

Очевидно, я не могу сделать это, потому что min-content является именованным значением свойства не разрешаемое число. Так как мне достичь этого только в CSS? Или я обязан использовать JS? Заранее спасибо.

...