Как сделать изгибаемые элементы разного размера, чтобы заполнить родительский элемент при переносе

Question

У меня есть следующий шаблон:

<div id="row">
  <div id="longer"></div>
  <div id="shorter"></div>
</div>

Когда они находятся в одной строке, я бы хотел, чтобы longer занимал вдвое большую ширину, чем shorter, поэтому я применил следующееCSS:

#row {
  display: flex;
  flex-wrap: wrap;
}

#longer {
  flex: 1 0;
}

#shorter {
  flex: 0.5 0;
}

Это, похоже, работает нормально, но когда обернуто shorter, оно занимает только 50% новой строки, даже если это единственный элемент в этой строке.

Я бы хотел, чтобы shorter заполнил всю строку, если это единственный элемент в этой строке.

Этого можно достичь без медиазапросов?

Plunker link

Answer 1

Сделайте это flex: 2 0 и flex: 1 0 - дробные flex-grow или flex-shrink будут только flex a фракция доступного пространства на оси flex .Смотрите демо ниже:

body {
  display: flex;
}

#row {
  flex: 1 0;
  display: flex;
  flex-wrap: wrap;
}

#longer {
  flex: 2 0;
  background-color: lightgreen;
}

#shorter {
  flex: 1 0;
  background-color: lightblue;
}

<div id="row">
  <div id="longer">
    this_is_the_longer_div_asdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
  </div>
  <div id="shorter">
    this_should_fill_parent_width_when_wrapped
  </div>
</div>

Answer 2

В тех случаях, когда сумма детских значений flex-grow меньше 1, они не будут заполнять всю ширину родительского элемента, а только вместо соответствующей дроби.

Вы можете просто умножить их на одно и то жемасштаб, чтобы они были по крайней мере 1:

#row {
  display: flex;
  flex-wrap: wrap;
}

#longer {
  flex: 2 0;
}

#shorter {
  flex: 1 0;
}


/* Just for demo */

#row div {
  white-space: nowrap;
}

#row div:nth-child(1) {
  background: green;
}

#row div:nth-child(2) {
  background: red;
}

<div id="row">
  <div id="longer">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div id="shorter">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>