タブレットサイズになると背景画像が表示されない

前提・実現したいこと

レスポンシブサイトを作っています。
タブレットサイズにブラウザを縮小させると背景画像にしているtest.jpgが表示されなくなります。
それを表示させたいです。

試したこと

パスの確認をしましたがPCのブラウザサイズ1025pxに指定したのでもスマホでも表示されました。
background-imageに!importantをつけてみましたが、表示されませんでした。
高さをheightで指定してみても表示されませんでした。
ブラウザの検証機能を使うと画像自体はあるようです。
タブレットはもっていないのでタブレットで確認したわけではありません。ブラウザを縮小させました。
スマホは持っているのでスマホのサイズでは表示されました。

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

　wordpress5.8.2のtwentynineteenのテーマを使っています。

HTML

	<div class="test-box">
		<div class="sub-box1">
		<p class="test-text1">木曽道中記</p>
			<p class="test-text2">江戸下谷竜泉寺町生まれ。読売新聞社に入社後、その才能を買われ、1886（明治19）年「当世商人気質」を連載し作家デヴュー。江戸文学の流れを継承しつつ、西洋文芸の要素を早くから取り入れた。幸田露伴をして篁村の親友・坪内逍遥とともに「明治二十年前後の二文星」と呼ばしめる。劇評家や江戸文学史研究家、翻訳家としても知られる。（大久保ゆう）</p>
			</div>
		
		<div class="sub-box2">
		<p class="test-sub-img"></p>
		</div>
		
	</div>

CSS

@media screen and (min-width:768px) and ( max-width:1024px) {
.test-box {
    width:100%;
    margin-top:40px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	}
	
.test-box.sub-box1 {
		width:58.18%;
		padding-left:10px;
		padding-right:10px;
	}

.test-box .sub-box1 .test-text1 {
		font-size:1em;
	}
	
.test-box .sub-box1 .test-text2 {
		font-size:1em;
	}
	
.test-box .sub-box2 .test-sub-img {
	width:40%;
	padding-top:62.272%;
	background-image:url('image/test.jpg');
	background-repeat:  no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   -ms-background-size: cover;
   background-size: cover;
   background-position: center center;
   margin-left:1.82%;
	}
}

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

回答1件

ベストアンサー

パーセンテージで指定しているので、flexでは表示されないと思います。

css
1      .test-box .sub-box2 .test-sub-img {
2        width: 40%; /* たとえば 40vw などを指定すると表示されるはず */
3
4/* ... */
5
6/* あるいはフレックスアイテムにサイズを指定するとか */
7      .test-box .sub-box2 {
8        flex-shrink: 0;
9        width: 40%;
10      }