サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年4月6日 11:50
モバイルの時のヘッダーでレイアウトシフトが起こります。
Cocoon設定：
- ヘッダーモバイルボタン
- モバイルボタンの固定表示
環境：
- 高速化無効
- プラグイン全て無効
- 独自CSS削除
- キャッシュ削除
これらでも改善されませんでした。
以前はそのようなことがなかったと思うのですが、何か構造変更によるものでしょうか？
.has-logo-button .logo-menu-button
flex-grow: 99;
}
が後から適用されているようなイメージです。
キャプチャで申し訳ないのですが、上の状態から下の状態へ変化します。
2024年4月6日 19:07
レイアウトシフトとは以下のような定義でよろしいでしょうか。
2024年4月6日 19:18
とは言ってもただメディアクエリで読み込んでいるだけなんですけどね…。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/style.css#L11294
style.cssの11294行目で書かれているので、トップから読み込まれる時差とかなんですかね。
以前はそのようなことがなかったと思うのですが、何か構造変更によるものでしょうか？
flex-grow: 99;が追加されたのは、5年前なので最近の構造変化ではないような気がします。
https://github.com/xserver-inc/cocoon/commit/c29e6ee9008152bbd8de73ad9393d1fd4077169b#diff-b627632bdd8e8c6e28eec59d575d52e6850d9ec601602d6c460cf071f5ddde6cR99
この投稿は9か月前ずつわいひらに変更されました
2024年4月6日 21:34
すみません。
関係ないかもしれませんが、素朴な疑問ということで。
デベロッパーツールでCocoon公式サイト見ると、以下のような感じなのですけれど。
loading="lazy"属性があるのに、widthとheightがないと、ふと思ったのですけれど。
それともファーストビューだから、loading="lazy"が不要？
トピックスターター 2024年4月6日 21:37
私の環境（iPhone13/Safari）でもたまにロゴ表示前にサイト名が表示される場合があります。
Chromeだとloading="lazy"はないのですが、Safariだとありますね。
この投稿は9か月前 2回ずつhis-に変更されました
2024年4月6日 21:44
loading="lazy"指定時には、widthとheightが必要だと思っていたもので、少し確認をさせていただきたいなと。
（ファーストビューということもありそうですし、私の認識が違うかもしれませんので）
私が貼りつけたGIFでは、画像が遅延読み込みされて、その後シフトしているように見えたので。
（そういうこともあり、素朴な疑問ということで。）
ウェブ向けのブラウザレベルの画像遅延読み込み
画像にディメンション属性を指定する
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja#dimension-attributes
2024年4月6日 22:00
loading="lazy"属性があるのに、widthとheightがないと、ふと思ったのですけれど。
loading="lazy"属性ついてます？
僕の環境だとないように見えるんですけど。
ソースコードにも入れてないように見えます。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/tmp/mobile-logo-button.php#L23
何か挿入される条件とかがあるんですかね。
2024年4月6日 22:14
デベロッパーツールを起動していない状態でロードして、表示（つまりPC表示）。
その後デベロッパーツールを起動して、モバイル表示を確認すると、loading="lazy"はないです。
最初からデベロッパーツールを起動しておいて、モバイル表示にします。
（つまり上の状態からの続き）
その状態で、リロードして、その後確認すると、loading="lazy"があります。
【追記】
デベロッパーツールを起動していても、いわゆるPC表示の状態でリロードして、その後モバイル表示へ変更した場合、loading="lazy"はないですね。
でも、最初からモバイル表示の状態でリロードすると、loading="lazy"が付いてきます。
わいひら reacted
2024年4月6日 23:12
私のローカル環境で、デベロッパーツール上で、なのですけれど。
「Cocoon設定」－「高速化」の「遅延読み込み」が、無効な場合
（2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・）
「Cocoon設定」－「高速化」の「遅延読み込み」が、有効な場合
（同様に2回リロードしています）
（同様に2回リロードしています）
【追記】
his-さんの環境で、「Cocoon設定」－「高速化」の「遅延読み込み」は、現在有効なのでしょうか？
有効な場合、無効にすると変化ありますでしょうか？
わいひら reacted
2024年4月7日 09:11
his-さん
フォーラム上部の案内の通り、環境情報をご提示いただけないでしょうか。
公開できないなら、URLは削除していただいて構いません。
あまりにも情報がないです。
こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。
推測にも限界があります。
何か別のきっかけがないと、おそらくこれ以上進まないです。
高速化が無効とは、Cocoonの遅延読み込みが無効ということで良いのですよね。
曖昧にではなく、具体的に会話しないと、認識齟齬や誤解が生じます。
ブラウザが自動的にloading属性をつけることってあるんですか？
トピックスターター 2024年4月7日 09:54
あまりにも情報がないです。
こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。
推測にも限界があります。
ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。
----------------------------------------------
サイト名：demo
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.5
PHPバージョン：8.2.9
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.2.3
カテゴリー数：1
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845 バイト
functions.phpサイズ：5826 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
2024年4月7日 10:04
ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。
これは、Cocoonの遅延読み込みが有効であるために、loading="lazy"が指定されています。
しかし、widthとheightの指定がないために、発生しています。
ですので、私の再現通り、Cocoonの遅延読み込みを無効にすると、解消します。
先に書いた通りです。
loading="lazy"属性があるのに、widthとheightがない
「Cocoon設定」－「高速化」の「遅延読み込み」が、無効な場合
（2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・）「Cocoon設定」－「高速化」の「遅延読み込み」が、有効な場合
（同様に2回リロードしています）
上記のように、私の環境ではCocoonの遅延読み込みが無効の場合は、動かないです。
（静止画ではなく、どちらもGIF動画を貼り付けています。）
このCocoon公式サイトも、遅延読み込みが有効だと思います。
his-さんは、Cocoonの遅延読み込みを無効になさっているとのこと。
この状態で、事象の再現はできていないです。
よって、検証も難しいと思います。まずは再現させるところからだと思います。
環境情報には、プラグインの情報がないようですが。
トピックスターター 2024年4月7日 10:24
環境情報には、プラグインの情報がないようですが。
さすがに揚げ足取りをしているようにしか見えません。
- 高速化無効
- プラグイン全て無効
- 独自CSS削除
- キャッシュ削除
2024年4月7日 10:43
さすがに揚げ足取りをしているようにしか見えません。
そんなつもりもないですし、そんなことに時間を使う気もないです。
無効化してあるということですね。
見落としていました、申し訳ないです。
残念ながら、その状態で私の環境では、本事象は今のところ再現できません。
時間を使い真摯に取り組んでいるつもりですが、お気に触るようですので、撤退させていただこうと思います。
今のところ再現ができず、検証も難しいです。（再現のきっかけがあれば・・・。テーマに不具合があるなら解消はしたいです）
トピックスターター 2024年4月7日 11:06
時間を使い真摯に取り組んでいるのは私も同様です。
（少なくとも私独自の問題ではないので）
改善されたというご自身の環境も記載されないと、こちらも比較検証できないのも同様です。
まだこちらで検証していない事といえばサーバー側のキャッシュ辺りですかね…。
Safariではloading属性がついていたのに、Chromeではついていなかったのも気になります。
WordPress側で何らかのフィルタリングでつけているのかもしれませんがこのあたりは不明確です。
2024年4月9日 00:52
モバイルヘッダーがレイアウトシフトする不具合修正を行いました。
flex-grow: 99;が原因っぽくはなく、ここのwidth: 100%;が曖昧だったのが良くなかったっぽい。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268L38
あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい？です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39
この投稿は8か月前 2回ずつわいひらに変更されました
ｍｋ２ reacted
2024年4月9日 00:56
モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b
あとこれは効果があるかはわからないけど（基本的に大きな画像が設定されるので）、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046
あとこれも効果というのはあまりないんですけど、「上にあるものは、上で読み込んだ方がいいのかな」と思いmp/mobile-header-menu-buttons.phpテンプレートの場所ヘッダー付近に移動しました。
https://github.com/xserver-inc/cocoon/commit/a07045800b100ba25d4f381804eb26b10e8cd3d8
↑はテンプレートをカスタマイズしている人には影響が出るので、元に戻すかもしれません。
2024年4月9日 01:08
ダウンロードファイルはこちら
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
確認用に当サイトにも適用しておきました。
https://wp-cocoon.com/?theme-switch=skin-colors-blue
2024年4月9日 02:13
ご対応いただき、ありがとうございます。
私の環境では、「Cocoon設定」の「遅延読み込み」が「無効」の状態では、なかなか発生しなかったのですが・・・。
（ロゴが小さいのかしら？）
今やっと、発生させることができました。
画面をタブレットサイズ（添付はiPad miniのサイズ）にして、発生させることができました。
（それでも、毎回は発生しませんので、何かリロードして試す感じです）
上記の状態で
- 「Cocoon設定」の「遅延読み込み」が「無効」の状態
- 今回の、複数ある対応は、それぞれ「対象のソースだけを入れ替える」
上記の形で、確認させていただきました。
①
あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい？です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39
私の環境でも、この対応（だけ）で、今回の事象は発生しなくなりました。
②
モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b
こちらは、「Cocoon設定」の「遅延読み込み」を「有効」にして、HTMLソースに介入がないことを確認させていただきました。
以下は、「Cocoon設定」の「遅延読み込み」が「有効」な状態です。
③
あとこれは効果があるかはわからないけど（基本的に大きな画像が設定されるので）、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046
この対応で、widthとheightが追加されることを確認させていただきました。
しかしながら、この対応では、今回の事象は解消しませんでした。
④
あとこれも効果というのはあまりないんですけど、「上にあるものは、上で読み込んだ方がいいのかな」と思いmp/mobile-header-menu-buttons.phpテンプレートの場所ヘッダー付近に移動しました。
https://github.com/xserver-inc/cocoon/commit/a07045800b100ba25d4f381804eb26b10e8cd3d8
この対応でも、今回の事象は解消しませんでした。
↑はテンプレートをカスタマイズしている人には影響が出るので、元に戻すかもしれません。
ちょっと影響が大きそう・・・な印象はありますね。
2024年4月9日 02:53
ふと思ったのですけれど。
以下の対応は、あった方が良いのかもしれないですね。
あとこれは効果があるかはわからないけど（基本的に大きな画像が設定されるので）、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046
サーバー側の高速化機能の1つとして、画像の遅延読み込みの機能を提供するところが、増えてきているように思います。
例えば、ConoHa WINGは「WEXAL」で、一部かもしれませんが、画像の遅延読み込みができるようです。
WEXALについて
https://support.conoha.jp/w/wexal/#05
「WEXAL」は、ConoHa WING以外にも、導入しているところがあるみたいです。
エックスサーバーも、XPageSpeedという機能で、画像の遅延読み込みの設定ができるみたいです。
XPageSpeed設定について
https://www.xserver.ne.jp/manual/man_server_xpagespeed.php#link-b
サーバー側の機能の場合、実際に、どういう対応で実現するのかは確認ができませんので、分からないのですけれど。
サーバー側でHTMLに介入するのであれば、widthとheightを追加してくれないこともあるかもしれないな・・・という気はしました。
（確認した訳ではありませんので分かりませんので、そういうことはないのかもしれないですけれど）
トピックスターター 2024年4月9日 08:30
ご対応ありがとうございます。
モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の２つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。
私の環境では右端以外が動いているようです。
左右にアイコンがある場合はうまくいっているように見えます。
2024年4月9日 23:13
モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の２つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。
僕の環境では駄目ですね。
一旦元の環境に戻しました。
今日何時間か試行錯誤してみたんですが、結局
- ロゴメニュー：引き伸ばす
- その他のメニュー：70px
みたいに、メニューの幅に違いがあると必ずレイアウトシフトしますね。
例えば、全てのメニューが均一でwidth:100%;とかwidth:70px;と同じであれば、レイアウトシフトしないようです。
なので、今のCocoonの環境（GitHubの最新版）で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318
ただ見た目は、添付画像のように、すべてのモバイルメニューの幅が同じになってしまいます。
この投稿は8か月前 2回ずつわいひらに変更されました
2024年4月9日 23:16
今回のレイアウトシフトの原因で言えばサイトロゴ画像が原因の可能性は低いように感じます。
というのもサイトロゴ画像を設定しないで、添付画像のように、サイトロゴ画像を表示しないで文字列を表示させたとしても、レイアウトシフトが起きるからです。
ただあくまで僕の環境ではなので、条件が重なると原因となる可能性もあるのかもしれません。
2024年4月10日 00:15
具体的にどうやったなど例や事象などが分かりませんので、適当にやってみました。
とりあえず、Cocoonを昨日修正いただいたVerにして、以下のような感じにしてみました。
ロゴ部分は、テキストです。（画像ではありません）
動いてしまいました。
（ブラウザ側のキャッシュが有効であれば、初回は動きますが、2回目以降は止まるみたいでした、上下GIF共、デベロッパーツールでキャッシュを無効にしてあります）
ロゴの部分に、適当にwidthを指定すると、止まるみたいでした。
（計算するのが面倒でしたので、適当に70vwにしました）
（計算するのが面倒でしたので、適当に70vwにしました）
下に少しだけ見えている背景画像がちらつくタイミングで、リロードされています。
（機種によって幅は変わりますから、これでは・・・）
わいひら reacted
2024年4月10日 01:21
上記で動かなくなるのであれば、個別に（子テーマ等で）対応する分には、できそうな気もしますね。
（アイコンの場所の大きさは、決まっているでしょうから、あとは計算すれば）
2024年4月10日 19:34
メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。
不特定数のボタンが入るとなると、ほんとどうしたらいいんだろう。
フレックスボックス以外のアプローチも試してみようと思います。
2024年4月10日 19:44
メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。
そうですよね。
なので、個別にでないと難しいなと思ったんですよね。
おそらくFontAwesomeが原因なのかなと思ったのですけれど。
再描写に時間が掛かるのかなと思ったのですけれど。
（preloadしても、まだダメなのかという感じですけれど）
2024年4月11日 19:18
なので、今のCocoonの環境（GitHubの最新版）で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318
ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。
レイアウトシフトを起こさないということに重点を当てるのであれば、添付画像のような見た目になりますが、これを良しとするかになりそう。
もしくはPHPで出力されるボタンを解析して、calcで計算しきる方法くらいか僕に思いつきませんでした。
2024年4月11日 20:15
ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。
確かに、私の環境でも止まりました。
ちょっと訳が分からなくなってきましたが・・・。
今、親テーマでボタンは、70pxが指定されていて。
ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。
以下のように止まらなくて・・・。
【追記】
適用順ということかもしれませんね。
（ローカル環境だから読み込みに時間が掛かる？時差が生まれる？）
（ローカル環境だから読み込みに時間が掛かる？時差が生まれる？）
上記に加えて、子テーマで両ボタンにwidthを指定すると、止まります。
（親テーマと同じ70pxを指定。つまり子テーマで、ボタンもロゴもwidthを指定した状態）
（親テーマと同じ70pxを指定。つまり子テーマで、ボタンもロゴもwidthを指定した状態）
上記のような事象でしたので、更に以下を試しました。
子テーマでwidthを指定しない場合。
（上記GIFと同じ状態。子テーマではロゴ部分のみwidthが指定されている状態。ボタンのwidthは親テーマ）
（上記GIFと同じ状態。子テーマではロゴ部分のみwidthが指定されている状態。ボタンのwidthは親テーマ）
Cocoonの高速化で、CSS縮小化を有効にすると止まります。
（CSS縮小化が無効だと、動きます）
（CSS縮小化が無効だと、動きます）
ボタンの数が分かればなんとかなりそうですよね。
わいひら reacted
2024年4月11日 21:32
どちらも親テーマで試してみたのですが、フォントサイズの違いで、動きが大きく見えるのでしょうか。
Cocoon 2.6.9
Cocoon 2.7.2.8
（どちらも毎回発生しなかったもので、何回かリロードして、発生するのを待つ感じではあります）
親テーマの設定は変えていないと思いますが。
2.6.9は19px、2.7.2.8は16pxが適用されているようですね。
今のバージョンの方が動きが大きく見えるように思います。
わいひら reacted
2024年4月12日 19:51
ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。
以下のように止まらなくて・・・。
本当だ。モバイルボタンに適用されているwidth:100%とかは全て取り去って、最終的な.logo-menu-button幅をwidth:244pxみたいに決め打ちで入力してもレイアウトシフト起きちゃいますね。
ちょっとお手上げ状態です。
2024年4月12日 19:51
親テーマの設定は変えていないと思いますが。2.6.9は19px、2.7.2.8は16pxが適用されているようですね。
最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。
2024年4月12日 21:15
最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。
https://wp-cocoon.com/community/postid/77854/
バージョン：2.7.1.7に戻してみましたが、チラツキは発生します。
結果、上記は直接的原因ではないです。
わいひら reacted
2024年4月12日 21:51
「レイアウトシフト」何言っているか全く分からず。
モバイル表示した際、一瞬、ヘッダーモバイルボタンの配置が動きチラついて表示される、ですよね？
現象は、簡単な言葉で、動作を丁寧に書かないと、第三者には分かりません。
以下で改善しませんか？
以下をwidth:70px;に変更
https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L7803
以下を削除
https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11357
以下にjustify-content: space-between;を追加
https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11353
以下を追加
.logo-menu-button {
flex:1;
}
わいひら reacted
2024年4月13日 20:56
ありがとうございます。
修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/cdb363ac7b56fb802e33471f67f62e76a3e6a9ab
2024年4月13日 21:34
@yhira さん
見たら、らちが明かないと思え、助け舟です。
display:flexを用いているので要素が可変となり。
この為、ボタン幅を固定にする必要があります。
また、ボタンを配置した際、残りの余白をロゴに割り当てる為、flex:1とします。
2024年4月13日 23:26
修正後僕の環境では、意図通りに動作してますけどどこかおかしかったですか？
flex: 1;はflex: 1 1 0;のことだから、明示的にするためにflex-grow: 1;でもいいかとそのようにしたんですけど。
この投稿は8か月前 2回ずつわいひらに変更されました
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。