Ограничение на макет grid с значением по умолчанию

Question

Описание

Хочу создать такой мает при помощи CSS - Grid:

	Насколько нужно для контента	Как можно больше	Насколько нужно для контента, но не больше `30vmin`
Как можно больше	`menu-area`		`toolkit-area`
Насколько нужно для контента	`menu-area`	`status-area`	`toolkit-area`

Собственно создаю:

div.container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 'menu-area -1- toolkit-area' 1fr 'menu-area status-area toolkit-area' auto / auto 1fr minmax(auto, 30vmin);
}

div.menu {
  grid-area: menu-area;
  background-color: red;
}

div.status {
  grid-area: status-area;
  background-color: green;
}

div.toolkit {
  grid-area: toolkit-area;
  background-color: blue;
}

<div class="container">
  <div class="menu">
    <img alt="Icon">
  </div>
  <div class="status">
     <img alt="Icon">
  </div>
  <div class="toolkit"></div>
</div>

Проблема в том, что toolkit-area (синяя область) по умолчанию занимает 30vmin, но внутри контента нет.
Поскольку я задал minmax(auto, 30vmin), он почему-то решил, что надо занять 30vmin даже без контента.

Вопрос

Я хочу, чтобы его ширина была столько, сколько понадобиться для контента внутри, но не больше 30vmin, а не 30vmin по умолчанию. Но у меня не удается контролировать размер по-умолчанию. Такие варианты как minmax(0, 30vmin), minmax(min-content, 30vmin) или minmax(max-content, 30vmin) не работают.
Как решить этот вопрос?

Уточнение

Поскольку в области toolkit-area могут быть совершенно разные панели, то есть нельзя задать его размер auto и задать максимальную ширину панелей max-width: 30vmin.
Не будем углубляться, просто примем что так не вариант. :)

Answer 1

Много непонятного в вопросе... Откуда такая любовь к minmax(...) ? Чем не устраивает max-width ? И почему vmin, а не vmax ?

Решение ниже полностью отвечает на сам вопрос, но уточнение идёт вразрез.

div.container {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 'menu-area . toolkit-area' 1fr 'menu-area status-area toolkit-area' auto / auto 1fr min-content;
}

div.menu {
  grid-area: menu-area;
  background-color: red;
}

div.status {
  grid-area: status-area;
  background-color: green;
}

div.toolkit {
  grid-area: toolkit-area;
  background-color: blue;
  max-width: 30vmin;
}

<div class="container">
  <div class="menu" contenteditable>
    <img alt="Icon">
  </div>
  <div class="status" contenteditable>
     <img alt="Icon">
  </div>
  <div class="toolkit" contenteditable>toolkit</div>
</div>

Я специально сделал блоки редактируемыми, чтобы можно было проверить, что всё растягивается и ограничивается, как нужно.

БЛОГ НА HUSL

Ограничение на макет grid с значением по умолчанию

Описание

Вопрос

Уточнение

Ответы (1 шт):