Как сначала укоротить больших детей во флекс-боксе?

Question

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

Например, 3 маленьких ребенка выглядят отлично:

Но как только у одного ребенка будет больше текста, все будет сокращено:

Есть ли способ настроить гибкую коробку так, чтобы она сначала сжимала больших детей до того же размера, что и младшие дети?

В идеале пример должен выглядеть следующим образом:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
} 

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

Answer 1

С flexbox Полагаю, можно сделать так, чтобы flex flex растягивался на равную величину, присваивая flex: 1 элементу child (но это имеет обратную сторону, что childэлементы не имеют авто ширина) - см. демонстрацию ниже:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
  flex: 1;
}

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

Используя CSS Grid layout, вы можете легко добиться этого:

1. Использование display: grid на контейнере.

2. Добавьте grid-template-columns: repeat(3, auto), чтобы сделать три столбца автоматической ширины

См. демонстрацию ниже:

.container {
  display: grid; /* defines a grid container */
  grid-template-columns: repeat(3, auto); /* all three columns with auto width */
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
}

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

Answer 2

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

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width:86px;
}

<div class="container">
  <div class="child">Link A</div>
  <div class="child">Link B</div>
  <div class="child">Link C this is a really long link with lots of text</div>
</div>

Answer 3

Я думаю, что вы ищете flex-shrink, flex-grow и flex-basis, чтобы узнать больше прочитайте это

.container {
  display: flex;
  width: 300px;/*I changed this just for testing*/
}

.child {
  flex: 1 1 33%;/*Add this line*/
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

<div class="container">
  <div class="child">
    Link A
  </div>
  <div class="child">
    Link B
  </div>
  <div class="child">
    Link C this is a really long link with lots of text
  </div>
</div>

Answer 4

Вы пытались установить ширину для childs?

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
  width: 200px;
} 

<div class="container">
  <div class="child">Link A</div>
  <div class="child">Link B</div>
  <div class="child">Link C this is a really long link with lots of text</div>
</div>