Используя Flexbox или CSS Grid, можно ли изменить размер моих столбцов на основе содержимого одного из столбцов?

Вот что я хочу:

У меня есть 2 столбца: основной и боковой.

|------------------------container--------------------------|
|                                                           |
||----------------------------------------|----------------||
||               main                     |      side      ||
||----------------------------------------|----------------||
|                                                           |
|-----------------------------------------------------------|

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

По мере увеличения контейнера основной будет увеличиваться с той же скоростью, в то время как боковая ширина останется автоматической.

|--------------------------container increases----------------------|
|                                                                   |
||------------------------------------------------|----------------||
||                   main increases               |      side      ||
||------------------------------------------------|----------------||
|                                                                   |
|-------------------------------------------------------------------|

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

|--------------------container----------------------|
|                                                   |
||--------------------------------|----------------||
||               main             |      side      ||
||--------------------------------|----------------||
|                                                   |
|---------------------------------------------------|

Если контейнер еще больше сжимается, я хочу, чтобы столбцы складывались, и теперь оба столбца имеют ширину 100%:

|--------------------container--------------------|
|                                                 |
||-----------------------------------------------||
||               main                            ||
||-----------------------------------------------||
||-----------------------------------------------||
||                           side                ||
||-----------------------------------------------||
|                                                 |
|-------------------------------------------------|

Вот что я пробовал:

Я пытался сделать это с помощью Flexbox и Grid, но не смог заставить основной столбец определять свой размер на основе бокового столбца.

.container-grid {
  display: grid;
  grid-template-columns: 1fr auto; /* works, but doesn’t wrap when left column gets too small */
  /* I also tried the repeat() syntax, but that only worked for similarly-sized columns */
}

.container-flex {
  display: flex;
  flex-wrap: wrap;
}
.main { flex: 2; } .side { flex: 1; } /* same problem, doesn’t wrap */
.main ( flex: 0 1 auto; } .side { flex: 0 0 auto; } /* wraps columns too early, any time main is smaller than intrinsic width */

Единственное работающее решение, которое я пробовал, — это знание фиксированной ширины бокового столбца (которую мне пришлось бы предсказывать, не зная его содержимого), а затем использование медиа-запроса в 3 раза больше его ширины. И, конечно же, медиа-запрос работает только с шириной окна, а не с шириной контейнера, поэтому мне пришлось бы вычислять медиа-запрос, используя любые родительские элементы контейнера.

.container-grid {
  display: grid;
  grid-template-columns: 1fr 15em;
}
@media screen and (max-width: 45em) {
  .container-grid {
    grid-template-columns: 1fr;
  }
}