text-overflow в сочетании с flexbox не работает [дубликат]

этот вопрос уже есть ответ здесь:

у меня есть контейнер шириной 300 пикселей с двумя изогнутыми дивами внутри.
Второй имеет ширину 100px, а другой должен занимать оставшееся пространство.
Когда я помещаю текст шире, чем оставшиеся 200px в первом div, он переполняется, и я могу использовать overflow: hidden и text-overflow: ellipsis добавить ... когда текст переполняет.
Когда я ставлю h1 тег в первом div и добавить overflow и text-overflow должен создать тот же эффект.
И это (в Chrome), но в IE и Firefox div становится больше, и многоточие не работает.
Когда я удаляю дополнительный h1 layer и обновите css соответственно, описанное поведение работает так, как ожидалось.

или посмотрите на мой JSFiddle

body{
    display: flex;
}

#container{
    display: flex;
    flex-basis: 300px;
    overflow: hidden;
}

#content{
    display: block;
    height: 300px;
    background-color: red;
    flex-grow: 1;
    flex-shrink: 1;
}

h1, h2{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#menu{
    display: flex;
    flex-grow: 0;
    height: 300px;
    background-color: blue;
    flex-shrink: 0;
}
<div id="container">
    <div id="content">
        <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1<h1>
    </div>
    <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>
9
css firefox flexbox html internet-explorer

2 ответов

добавить это:

#content {
  min-width: 0;
}


body{
  display: flex;
}
#container{
  display: flex;
  flex-basis: 300px;
  overflow: hidden;
}
#content{
  display: block;
  height: 300px;
  background-color: red;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}
h1, h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu{
  display: flex;
  flex-grow: 0;
  height: 300px;
  background-color: blue;
  flex-shrink: 0;
}
<div id="container">
  <div id="content">
    <h1>HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1 HEADER1</h1>
  </div>
  <div id="menu">xcvcxcxvcvxcvzxczxczgd</div>
</div>

вам это нужно, потому что модуль Flexbox изменил начальное значение min-width:

4.5 подразумеваемый минимальный размер элементов Flex

чтобы обеспечить более разумный минимальный размер по умолчанию для гибкий график работы пунктов, эта спецификация вводит новый авто значение в качестве начального значение мин-ширина и мин-высота свойства, определенные в В CSS 2.1.

17

ваша проблема здесь с содержимым div, display: block; свойство, похоже, устраняет эффект отображения flex в IE, когда я изменил его на display: flex; он работал.

кажется также, что содержимое переполняется относительно тела, которое также отображается:flex из-за flex-basis: 300px; в контейнере, и элемент h1 относительно элемента #content не переполняется, поэтому многоточие не работает.

кажется, работа над firefox версии 29.0, обратите внимание, что поведение flex полностью suuported, начиная с firefox 28+,

Регистрация http://caniuse.com/#feat=flexbox дополнительная информация

enter image description here

1