chromeでflex使用時に、画像の高さを優先してしまい困っています。

テキストと画像が横並びになるボックスを作成しました。
テキストの高さに合わせて画像の高さも変化するように、
flexを使用し、画像はobject-fitでトリミングされるようにしています。

firefox,ie11,edgeではテキストの高さに合わせて画像が表示されますが、
chromeでのみ画像の高さを優先してしまい、テキストよりも縦幅が出てしまいます。

chromeでもほかのブラウザと同じように、
テキストの高さに合わせて画像を表示させるにはどうしたら良いのでしょうか。

該当のソースコード

<div class="inner">
    <div class="textarea">
        <section class="item">
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </section>
    </div>
    <div class="thumb">
        <img src="○○○○.jpg" alt="画像">
    </div>
</div>

該当のソースコード

.inner{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.inner .textarea{
    width: 48%;
}
.inner .thumb{
    width: 48%;
}
.inner .thumb img{
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: top;
}

表示画面

このような状況になります。
画像の高さがテキストの高さよりも大きいので、
chromeでは画像の高さに合わせて表示されてしまいます。

firefox,ie11,edgeの場合↓

chromeの場合↓

x_x

2018/09/19 08:23

thumbがないので修正お願いします

harukamaki

2018/09/19 08:31

わ！すみません。こちらに記入する際にthumbをthumbImgにして書いていたようです。質問内のテキストを修正しましたので、再度確認いただけますか？

x_x

2018/09/19 08:43

再現しないように見えるので、問題の起こっている画面の画像を載せてもらってもいいでしょうか？

spookybird

2018/09/19 08:53

こちらで用意した画像（幅480px 高さ1080px）で試してみましたが、Firefox、IE11、Chromeすべてで同じように表示されます。

x_x

2018/09/19 08:53

この欄に書いても出ないので、質問の編集でお願いします

harukamaki

2018/09/19 08:54

すみません上記コメントは無視してください。（teratail初心者でして、コメントする場所を間違えてしまいました）質問に画像を追記しましたので、確認いただけると助かります！

x_x

2018/09/19 08:55

画像のサイズはいくつですか？

harukamaki

2018/09/19 08:57

画像のサイズは横900×縦600です。

harukamaki

2018/09/19 08:59

> spookybirdさん　確認いただきありがとうございます。これ以前の問題なのでしょうか・・再度確認してみます。お手間をとってしまいすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

object-fit は高さ幅両方指定しないといけないのでは？

CSS
1.inner .thumb img{
2    height: 100%;
3    width: 100%;/*＜＜*/
4    object-fit: cover;
5    object-position: top;
6}
7```**動くサンプル：**[https://jsfiddle.net/4pfqvcb3/](https://jsfiddle.net/4pfqvcb3/)