Сожмите перед переносом списка кнопок

Question

У меня есть список кнопок в гибком контейнере. Вот пример jsfiddle .

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}


.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
}


.container>button {
  flex-wrap: nowrap;
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="container">
  <div class="btn-container">
  <Button>
    hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>

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

В этом примере кнопки сжимаются только. Когда я добавляю flex-wrap: wrap к .btn-container, они оборачиваются только без сжатия. Итак, как мне сделать их сжатие перед переносом?

Примечание. При переносе мне нужно, чтобы кнопки не растут больше, чем их фактическая ширина.

Спасибо

Answer 1

Вы можете приблизить это значение, используя flex-basis:0 в сочетании с flex-grow. Я также полагаюсь на max-width: max-content;, чтобы ограничить эффект роста:

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}

.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
  flex-wrap: wrap;
}

.container>button {
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-basis:0;
  flex-grow:1;
  max-width: max-content;
}

<div class="container">
  <div class="btn-container">
    <Button>
    hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>