max-heightでoverflow:hiddenを指定すると画面縮小時に最初の文字がはみだす

Question

前提・実現したいこと

コードを書いていたところ、タイトルどおりの現象にあたり、解決ができないので質問しました。

発生している問題・エラーメッセージ

下のソースコードを実行して画面幅を縮めていくと「2つめのliタグのテキストの最初の文字」が自身のflexitemをぶちやぶって外へ出てしまいます。(質問の最後に画像を添付しました！)
画面を縮めたときにも最初の文字は読めるようにしておきたいため、この問題を解決したいです。

該当のソースコード

<header>
    <ul class="text">
        <li class="test">text</li>
        <li class="test">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</li>
        <li class="test">text</li>
        <li class="test">text</li>
        <li class="test">text</li>
    </ul>
</header>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.text {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.test {
    display: flex;
    align-items: center;
    padding: 20px;
    border: #ccc solid 1px;
    background-color: #ff9900;
    word-break: break-all;
    max-height: 150px;
    overflow: hidden;
    flex: 0 0 50%;
}

.test:first-child {
    flex-basis: 100%;
}

試したこと

Googleで検索してしらべてみましたが、widthではみ出したときや、固定幅ではみ出したときなど、なかなかheightに関することはありませんでした。

補足情報（FW/ツールのバージョンなど）

HTML5/CSS3

問題を再現させたときの画像。textという文字がボックスをつきやぶり、外へ出てしまっている。

Answer 1

max-height: 150px; を削除すれば突き破らず表示できます。あとは、align-items: center; をあきらめるか、どちらかだと思います。

あとはHTMLの構造を変えるか。

<header>
    <ul class="text">
        <li class="test">text</li>
        <li class="test"><span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span></li>
        <li class="test">text</li>
        <li class="test">text</li>
        <li class="test">text</li>
    </ul>
</header>

.text span {
    max-height: 150px;
    overflow: hidden;
}
```**動くサンプル：**[https://jsfiddle.net/5ap0kujf/](https://jsfiddle.net/5ap0kujf/)

Comments

[gol92204]

なるほど、flexitemじゃなければ突き破れないことを利用した、のでしょうか･･･？(自信がないので、お答えいただけたら幸いです)

ともあれ、解決できたため、質問を閉めさせていただきます。ありがとうございました！

[kei344]

> flexitemじゃなければ突き破れないことを利用した
align-items: center; の対象をテキスト自身からspanに移すことで、上下に突き破ることを解消しています。

[退会済みユーザー]

間違ったコメントなので削除