Эллипсис в контейнере flexbox

Question

С момента выхода последней версии Firefox Nightly (35.0a1) у меня возникла проблема с text-overflow: ellipsis внутри контейнера flexbox с flex-direction: row, причем каждый столбец имеет ширину 50%.

Демо:

.container { 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column { 
 
    flex-basis: 50%; 
 
} 
 

 
.column p { 
 
    background: gold; 
 
    
 
    /* Will not work in Firefox Nightly 35.0a1 */ 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    </div> 
 
</div>

В Nightly текст будет течь вне контейнера, а не добавлять к ... в конце. В Chrome и Firefox Stable он работает по назначению.

Answer 1

В конечном итоге это было связано с последними изменениями в Firefox Nightly. Короче говоря, установка min-width: 0 на селектор .column заставит его работать должным образом.

Более полный ответ можно найти here. Следует отметить:

«В основном: гибкие элементы откажет сжиматься ниже их минимальной внутренней ширины, если явно не указать„„на них“ мин-ширина“или„ширина“или» макс-ширина

Рабочий раствор:

.container { 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column { 
 
    /* This will make it work in Firefox >= 35.0a1 */ 
 
    min-width: 0; 
 
    flex-basis: 50%; 
 
} 
 

 
.column p { 
 
    background: gold; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    <div class="column"> 
 
     <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p> 
 
    </div> 
 
    </div> 
 
</div>