Приоритетность Обертывание в CSS

Question

У меня есть документ, который выглядит так (упрощенно):

<div style=" display:flex; flex-wrap:wrap; "> 
    <div>stuff</div> 
    <div> 
    Lots<br> 
    of<br> 
    vertical<br> 
    content<br> 
    <span>And one long sentence of text</spend> 
    </div> 
</div> 

Иногда экран достаточно широк, чтобы отобразить все без каких-либо упаковки на всех. Когда это не так, я хочу, чтобы предложение в промежутке было обернуто, что оказывает наименьшее влияние на общий макет. Вместо этого оба firefox и chrome обертывают внешний div.

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

Answer 1

ли, как это, где вы добавляете flex: 1 родителю span «сек

fiddle demo

<div style=" display:flex; flex-wrap:wrap; "> 
 
    <div>stuff stuff stuff</div> 
 
    <div style="flex: 1"> 
 
    Lots<br> 
 
    of<br> 
 
    vertical<br> 
 
    content<br> 
 
    <span>And one long sentence of text</span> 
 
    </div> 
 
</div>

Answer 2

Что, кажется, работает устанавливает

max-width: 0px 

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

В Firefox и Chrome, во всяком случае. Я почти ожидаю, что он сломается в другом браузере.