Возможно ли полное сжатие гибкого элемента до того, как другой начнет сжиматься - PullRequest
Новая
       3

Возможно ли полное сжатие гибкого элемента до того, как другой начнет сжиматься

0 голосов
/ 09 мая 2020

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

Макет, как показано ниже: 

-------------------------------------------------------------------
| gutter |           flexible content             | fixed content |
-------------------------------------------------------------------


.container {
  display: flex;
  width: 100%
}

.left-gutter {
  flex: 0 1 100px;
  background: blue;
}

.content {
  flex: 1 1 auto;
  background: green;
}

.right-gutter {
  flex: 0 0 100px;
  background: blue;
}
<div class="container">
  <div class="left-gutter"></div>
  <div class="content">Some amount of flexible content that shouldn't shrink til it has to</div>
  <div class="right-gutter">Fixed</div>
</div>

Левый и правый желоба начинаются с одинаковой ширины, но правый желоб никогда не сжимается.

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

Единственное, что, как мне кажется, может сработать, - это установить действительно высокое значение гибкости-усадки для левого желоба, но я не думаю, это гарантирует, что гибкий контент не сжимается.

Будет ли css grid лучший способ решить эту проблему?

РЕДАКТИРОВАТЬ: Более кратко, как я могу получить .left-gutter полностью сначала сжать, а затем, если и только если .left-gutter не имеет ширины, разрешите .content сжиматься. Спасибо @ZohirSalak за лучшую формулировку

...