web-dev-qa-db-ja.com

flexbox containerの省略記号

Firefox Nightlyの最新（？）リリース（35.0a1）以来、flexboxコンテナとtext-overflow: Ellipsisの各列での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では、意図したとおりに動作します。

cssfirefox
47
jlowgren

これは最終的にFirefox Nightlyの最近の変更まで追跡されました。短い話、設定min-width: 0上の.columnセレクターは、期待どおりに機能します。

より包括的な答えは here にあります。注意事項：

「基本的に、フレックスアイテムは、「min-width」または「width」または「max-width」を明示的に指定しない限り、最小の固有の幅以下に縮小することを拒否します。

実用的なソリューション：

.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>
91
jlowgren