display:flexを掛けると、画像が大きく縮んで、余計な隙間ができました。

contents-listというリストタグにつけているクラスをコンテナとして、display:flexをかけて、中身の２つのアイテム（div)を横並びにしようとしています。横並びにはなるのですが、クラス：contents-item1の画像が大きく縮んでしまい、imgを囲むdivと横のdiv（テキスト）に大きな隙間がうまれてしまい不自然なレイアウトになりました。
検証ツールで見たところ、クラス：contents-item1がやけに広がっています。添付した画像のようにimgが縮み、divは設定した覚えのないサイズに広がっています。（わかり辛くて申し訳ないですが、画像内の↓が現在の症状で、上側が作りたいレイアウトになります。）

解決のため、是非知恵を貸していただけますと助かります。よろしくお願い致します。

	<div class="main-contents-right clearfix">
				<!--main-visual-->
					<img src="image/top_mainvisual01.jpg" alt="メインビジュアル" class="main-img">
				<!--/main-visual-->

				<!--contents-->
				<div class="contents-all-area">
					<ul class="contents-area">
						
						<li class="contents-list">
							<div class="contents-item1">
								<a href=""><img src="image.jpg" alt="画像1" class="contents-image-size"></a>
							</div>

							<div>
								<p class="navy-midashi-text">テキストテキスト</p>

								<p class="midashi-bold-title">STAND Project</p>
								<p class="midashi-text-2"><a href="#">テキストテキスト</a></p>
								<p class="long-text">テキストテキスト</p>
							</div>
						</li>

						<li class="contents-list">
							<div>
								<a href=""><img src="image```ここに言語を入力
コード

/*contents-all-area*/
.main-contents-right{
	float: right;
	width: 	100%;
}

.contents-all-area{
	padding-left: 300px;
	padding-right: 50px;
	max-width:1080px;
}

.contents-list{
	display: flex;
}


.contents-image-size{
	width: 55%;
	height: auto;
	 
}

コード

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

回答1件

ベストアンサー

Flexアイテム(.contents-item1) の孫要素(.contents-image-size)にwidth: 55%;を設定しているのが原因ですね。親要素の55%という意味になりますので、45%分余白になります。

Flexアイテム(.contents-item1)に幅を設定して、.contents-image-size の幅を100%にすれば余白はなくなります。

css
1/*contents-all-area*/  
2.main-contents-right{  
3  float: right;  
4  width:     100%;  
5}  
6
7.contents-all-area{  
8  padding-left: 300px;  
9  padding-right: 50px;  
10  max-width:1080px;  
11}  
12
13.contents-list{  
14  display: flex;  
15}  
16
17/* 追加 */
18.contents-item1{  
19  width: 55%;  
20}  
21
22
23.contents-image-size{  
24  width: 100%;  /*修正*/
25  height: auto;  
26}  
27