приоритет многоточия текста

Question

У меня есть контейнер с дисплеем flex, который содержит 2 элемента.оба элемента имеют многоточие текста для поддержки длинного текста.Я хотел бы сделать некоторый приоритет между элементами, чтобы элемент 1 занимал место совпадения по мере необходимости, сохраняя некоторое фиксированное пространство для элемента 2. Это означает - если ширина контейнера составляет 200 пикселей - минимальный размер элемента 2 составляет 50 пикселей,Мне нравится пункт 1, чтобы получить до 150px (затем текстовый многоточие).Каков наилучший способ сделать это?

.ovf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 50px;">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex-shring:2">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>

JSFiddle

Answer 1

justify-content: space -ween;

section {
   display: flex;
   width: 50%;
   justify-content: space-between;
}
section>div {
   background: #eeeeee;
   padding: 15px;
}

<section>
   <div>
      <div>Area 1</div>
   </div>
   <div>
      <div>Area 2</div>
   </div>
</section>

Answer 2

Нашли способ сделать это - установите второй атрибут flex элемента равным 1:

.ovf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 0">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex:1;">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>

Спасибо вам всем

Answer 3

Просто примените flex: 1.5 или 2 к 1-му разделу (который вы хотите большей ширины) и flex:1 к другому div для меньшей ширины

.ovf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 50px;flex:1.5;">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex:1;">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>