検証ツールだと問題ないのに、実機だと要素が潰れてしまう

前提・実現したいこと

実機で要素が潰れないようにしたい。

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

Chrome検証ツールだと問題なく表示されますが、
スマホ・タブレット実機で確認すると、要素が潰れます。

該当のソースコード

HTML
1        <content class="project">
2            <image class="project__image" src="image/pic_demo1.webp"　width="241px"
3                height="135px"></image>
4            <div class="projectInner">
5                <h2 class="projectInner__heading">DemoSite 01</h2>
6                <div class="projectInner__head">
7                    <div class="projectInner__headLeft">
8                        <p class="projectInner__headLeft__category">Category〜</p>
9                    </div>
10                    <div class="projectInner__headRight">
11                        <a href="" class="projectInner__headRight__button">Visit</a>
12                    </div>
13                </div>
14                <p class="projectInner__description">税理士事務所の〜</p>
15            </div>
16        </content>
17

CSS
1.project {
2    width: 100%;
3    height: auto;
4    padding: 37px 0px;
5    margin-bottom: 16px;
6    display: flex;
7    flex-direction: column;
8    align-items: center;
9    overflow: hidden;
10
11.projectInner {
12    width: 90%;
13    height: auto;
14 }
15
16

試したこと

自分なりに調べましたが、実機だけで崩れるという点と、可変させたいという点に合致する情報が見つけられませんでした。検討がつかず何も試していません。

補足情報

検証：GoogleChrome
実機：iPhoneX(GoogleChrome)
実機：iPad air4(GoogleChrome)

maisumakun

2021/08/11 05:55

<content>という見慣れないタグがありますが、これを使うためになにかライブラリを入れていたりはしますか？

退会済みユーザー

2021/08/11 06:04

本当ですね。divタグの間違いでした。修正して再UPしましたが変わらず潰れてしまいます。追加情報ですが、PCのSafariでも同様の現象が発生しました。

退会済みユーザー

2021/08/11 06:05

※キャッシュクリアして表示確認しました。

maisumakun

2021/08/11 06:22

> 追加情報ですが、PCのSafariでも同様の現象が発生しました。でしたら、両者で検証ツールを開いて比較すれば、どこに差異が出ているのか確認できるかと思います。

Lhankor_Mhy

2021/08/11 07:23

「可変させたいという点」とは、具体的にはどういうものですか？

退会済みユーザー

2021/08/11 07:26

画面幅が縮まり、テキストが折り返しになったとき、テキストと画像を囲っている白枠の高さを伸ばしていきたいということです。

Lhankor_Mhy

2021/08/11 07:28

また、ご提示のコードを試してみましたが、PCでもスクリーンショットのようなレイアウトになりませんでした。ですので、検証をすることができません。おそらく、ご提示いただいていない部分があるのではないか、と思います。

Lhankor_Mhy

2021/08/11 07:56

flex-direction: column を削除するとたぶん近いものになりましたが、それでよろしいですか？

退会済みユーザー

2021/08/12 00:29

maisumakun様 > でしたら、両者で検証ツールを開いて比較すれば、どこに差異が出ているのか確認できるかと思います。比較してみました。適用されているstyleは同じでしたが、computedタブで確認すると最終的な値が、SafariではChromeよりも低い高さに変わってしまっていました。今回はpx指定することにいたしました。どうもありがとうございました。 > Lhankor_Mhy様申し訳ありません。モバイルファーストで記述しており、タブレット以上のサイズでのコードの掲載が漏れておりました。タブレットサイズ以上ではflex-direction: rowを指定しています。今回はpx指定することにいたしました。どうもありがとうございました。

Lhankor_Mhy

2021/08/12 10:50

ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。