CSS для распространения среднего элемента, сохраняя остальные фиксированными и сложенными во flexbox

Question

Как показывает скрипка , у меня почти идеальное поведение для cutty в середине. Он показывает весь текст вплоть до того места, где заканчивается пространство, разрешенное контейнером (за вычетом фиксированного выделения для fixy-x ), после чего текст обрезается и эллиптируется.

.fixy-lefty { flex: 0; }
.fixy-righty { flex: 0; }
.cutty {
  display: inline;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Единственное изменение, которое я хотел бы видеть сейчас, это то, что fixy-rightty не прилипло к правому краю контейнера (позволяя cutty украсть все пространство). Я хочу, чтобы первый был рядом с последним и , последний сжимается в соответствии с текстом в нем. (Представьте, что правильный компонент - это значок, который следует за основным текстом. Затем, если текст в среднем компоненте станет слишком широким, я хочу, чтобы он был эллиптическим.

Итак, я выгляжу примерно так:

| X | _ | краткий текст | _ | Y | _______
| X | _ | очень -ооооо-те ... | _ | Y |

Я попытался добавить четвертый компонент справа от cutty-Rightty . Я попытался инкапсулировать средний и правый с div. Я пробовал разные настройки для flex (изменение усадки, но не расширения), а также для разных дисплеев. Установка для контейнера justify-content: flex-start; и / или правильное значение для flex: 1 0 1; ни к чему конкретному не приводит.

Результат - ничего, ноль, нада, зилтч. Можно ли вообще достичь CSS или я должен полагаться на JS?

Answer 1

Просто удалите flex: 1; из .cutty, так как это не нужно.Прямо сейчас вы просите его заполнить все доступное пространство этим контейнером (flex-grow: 1).Удаляя это значение flex, оно будет вести себя так, как вы хотите, если достаточно содержимого .cutty будет расходовать и занимать все доступное пространство.

$("input").click(function() {
  var target = $("span.target")[0];
  target.textContent = "Very long text that should be cut and ellipted";
});

div,
span {
  margin: 5px;
  border: 2px solid black;
  display: flex;
}

.outer {
  display: block;
  width: 90%;
  padding: 5px;
}

.row {
  border-color: blue;
}

.left {
  flex: 1;
  border-color: blueviolet;
  overflow: hidden;
  
}

.right {
  flex: 3;
  border-color: green;
}

.fixy-lefty {
  flex: 0;
  border-color: burlywood;
}

.fixy-righty {
  flex: 0;
  border-color: orange;
}

.cutty {
  display: inline;
  /* flex: 1; (not needed) */
  border-color: pink;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.def {
  display: flex;
  flex: 1;
  border-color: greenyellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">

  <div class="row">
    <div class="left">
      <span class="fixy-lefty">Uno</span>
      <span class="cutty target">Duo</span>
      <span class="fixy-righty">Tro</span>
    </div>
    <div class="right">
      <span class="def">12</span>
      <span class="def">34</span>
      <span class="def">56</span>
      <span class="def">78</span>
      <span class="def">90</span>
    </div>
  </div>

  <div class="row">
    <div class="left">
      <span class="fixy-lefty">Uno</span>
      <span class="cutty">Very long text that needs to</span>
      <span class="fixy-righty">Tro</span>
    </div>
    <div class="right">
      <span class="def">12</span>
      <span class="def">34</span>
      <span class="def">56</span>
      <span class="def">78</span>
      <span class="def">90</span>
    </div>
  </div>

</div>

<input type="button" value="Click me">

Доступно также для JSFiddle