Уменьшите div в соответствии с его приоритетом до нулевой ширины с css

Question

Можно ли уменьшить div в соответствии с его приоритетом до нулевой ширины с помощью css?

Я покажу свой вариант использования для этого. Первый код:

.container {
  display: flex;
}

.container div {
  padding: 2px;
  color: #fff;
  font-size: 50px;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first {
  background-color: red;
  flex-shrink: 1;
}

.second {
  background-color: green;
  flex-shrink: 200000;
}

.third {
  background-color: blue;
  flex-shrink: 300000;
}

    <div class="container">
      <div class="first">
    firstfirstfirstfirstfirstfirstfirstfirstfirstfirstfirstfirstfirst
      </div>
      <div class="second">
    secondsecondsecondsecondsecondsecondsecondsecondsecondsecondsecondsecondsecond
      </div>
      <div class="third">
    thirdthirdthirdthirdthirdthirdthirdthirdthirdthirdthirdthird
      </div>
    </div>

jsFiddle

Теперь я объясню, что я хочу, чтобы произошло.

Есть три колонны. Слева направо: первый, второй и третий столбцы (в приоритетном порядке первый столбец является наиболее важным, затем второй, а затем третий; под приоритетом я подразумеваю, какой столбец должен пытаться отобразить сначала его полное содержимое, наиболее приоритетный столбец должен попробуйте сначала показать его полное содержание). Все столбцы могут занимать только одну строку.

Теперь я хочу следующее: первый столбец должен занимать все пространство, которое ему требуется, и если ему требуется больше места, чем доступно (переполняет строку), то я бы хотел скрыть переполнения и добавить многоточие к тексту в нем. После этого, если в строке больше нет места, я бы не хотел видеть второй и третий ряды вообще. Если есть больше места, то я хотел бы показать второй столбец, и если он не помещается, я бы хотел, чтобы эллипсы к его тексту добавлялись при переполнении. Затем оставшееся пространство (если оно есть) должно быть занято третьим столбцом, а многоточие должно быть добавлено при переполнении для его текста, если свободного места нет, то третий столбец вообще не должен быть видимым.

Надеюсь, я хорошо объяснил свои намерения.

ОБНОВЛЕНИЕ

Мне удалось достичь желаемого эффекта с помощью flex-shrink. Текущие проблемы: значения 1, 200000 и 300000 выглядят для меня техническим долгом. Кроме того, как видно из результатов выполнения кода, второй и третий столбцы не уменьшаются до 0, и их все еще можно увидеть: