こんにちは。以下はamp.cssです。今最新版をダウンロードして確認しました。

            .tagcloud a {
                background-color: #fff;
                border: 1px solid #dddedf;
                border-radius: 2px;
                color: #555;
                display: inline-block;
                margin-bottom: 5px;
                padding: 4px 8px;
                text-decoration: none;
                font-size: 12px;
                margin-right: 3px;
                flex: 1 0 auto;
                display: flex;
                justify-content: space-between
            }

原因はflex: 1 0 auto;みたいですね。amp.cssの微調整してまして。あとついでにですが、display: inline-block;　と　display: flex;　が上書きされてるようです。

amp.cssで子テーマ側のstyleで親テーマのstyleと同じコードで上書きがないかチェックしてたので見つけました。

一応は、そういった仕様にしました。
β版なのでいろいろ試そうと思って。
左右が揃って綺麗に見えるという利点もあるのですが、1つか2つが間延びして表示されるという難点もあります。
ここら辺は、おいおいと様子を見ながらまた戻すこともあるかもしれません。

こんにちは

最新バージョン：0.5.0のタグクラウドですが、タグの文字列が長い場合はみ出してしまうようです。例として

https://gyazo.com/d7beab01ffa8981318d2ec7686b8bd8f

PC上では気にならない人が多いと思いますが、スマホではみ出すような長い文字列の横揺れ対策があれば良い気もします。

個人的に横揺れ関連が結構気になり、横揺れをなくしたい人でなんか申し訳ないです。

そんな長い半角英数字文を入れてテストしていませんでした。

これで修正できたかと思います。

https://github.com/yhira/cocoon/archive/master.zip

長文テキストのタグ、PC表示ですが、横幅に収まっていました。

----------------------------------------------
テーマ名：Cocoon
バージョン：0.5.0
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
----------------------------------------------

追記：Google Chrome（PC）では、はみ出しました。

word-break: break-all;は私も追記してたんですが、今回の

flex: 1 0 auto;

があると効かないんです。良く調べてないのでナゼかわかりませんが。

https://github.com/yhira/cocoon/commit/2be2ab801f0a98deaecdb4ee5b889f93ba2721e6

• なのでこのアップデートでは、はみ出した状態になりました。

タグ『テーマのテンプレート編集○○-php関連』の文字列を変更すれば良いんですが、テストにもなるので初期当時のまま置いてます＾＾；

この文字列なら、320pxのスマホで『サイドバーを開いた時』グワングワンと横揺れする感じです。もっと長いと320pxの場合は、はみだしそうです。

flex: initial;

すごく雑ですが.tagcloud aに上記を追記して初期値に戻してる状態では、はみ出しません。

flex: 1 0 auto; はそのままにして、以下の CSS を追加するとどうでしょう？

.tagcloud a {
 max-width: 300px;
}

300px は、サイドバーの幅です。

こうするといかがでしょうか。

flex: 1 1 auto;

それにしても、FirefoxとChromeでここまで挙動に違いがあるとは思いませんでした。

一応、修正版もアップしておきます。

https://github.com/yhira/cocoon/archive/master.zip

わいひらさんの flex: 1 1 auto; の方が断然スマート。

修正版を試すとChromePC：どの幅でもキレイに表示されてます。スマホ320pxのChrome・Safari・FireFox：amp・通常ページどれも.tagcloud aで横揺れ起こしません。

この件も解決です。ありがとうございます＾＾

追記です。

@jitupuli さん私の言葉足らず部分の追記・ご確認ありがとうございました。

もしこの機能を停止したい人用に、上述では分かりにくいと思い追記します。

.tagcloud a {
 flex: initial;
}

この件も解決です。

と私、書いちゃったんですが『個人的に解決』が正解で、追記しなきゃと…。

@jitupuli さん、すみません。

勝手に乗っかって書き込みしだだけなのに、失礼しました＾＾；

アップしていただいた修正版で、Chrome（PC）でもきれいに収まっています。わいひらさんもおっしゃるとおり、今はβ版の段階ですので、いろいろと試されるのが良いかと思います。

かうたっくさん、Akiraさん、ありがとうございます。わたしは詳しいことはわからないのですが、お二方のコードを、（わかる範囲で）参考にさせていただいています。この場を借りてお礼申し上げます。

ご報告ありがとうございます。
Chromeでも問題なく表示されるようになって良かったです。