1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

flexアイテムの中でellipsisが効かない件

Last updated at Posted at 2019-12-13

タイトル通りですがコードペンにあげたので見てください(Bootstrapを使ってますので知らない人は分かりづらいかもしれません)。

フレックスアイテムの中にdivをおいてそこにellipsisを書いても効きません。親のフレックスアイテムにoverflow: hidden;をかける必要があります。かけないと中のdivがまったく縮まないではみ出ます。ちなみにoverflow: auto;でも大丈夫でした。

しかも、中のdivがinline-blockだと、はみ出はしませんが...になりません。blockである必要があります。

Chrome、FireFox、Safariで確認したのでバグではないでしょう。どういう理屈でこうなるのか分かりません。ご存じの方いらっしゃいましたら教えていただけるとうれしいです。

追記(2019/12/13 12:24)

min-width問題を忘れていた。flexアイテムはmin-widthがautoになるんでしたね。コードペンの方を編集しましたが、overflow: hidden;の代わりにmin-width: 0;でもいけました。ただ、中のdivがinline-blockだとmin-width: 0;でも縮まないですね。うーん。多分細かい仕様を聞けば納得いきそうな話ではありますが、ややこしいですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?