画像の横にテキストを表示させる方法

###[√] 画像の横にflex使ってテキストを表示させようとしたら画像が伸びる問題

見ての通り画像が縦に伸びております

横幅があまりないとき，このように画像が変形してしまうのです

div２つ使えばいいでしょ？という話ではありますが，
せっかくなのでflexでやる方法がないかと調べている途中です．

もしよければ，みなさんが，このようなレイアウトをするとき，
どのようにHTML,CSSを組むかも教えてもらえると，とても勉強になります．

###[√]CODE

html
1<!doctype html>
2
3<html>
4
5	<head>
6
7		<title>20161229</title>
8		<meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10		<style>
11			
12			*{padding:0;margin:0;
13			box-sizing:border-box;
14			}
15			
16			body{
17				width:100vw;
18				min-height:100vh;
19				background:#eee;
20				padding:50px;
21				}
22			
23			section{
24				overflow-x:scroll;
25				min-height:calc(100vh - 100px);
26				background:#fff;
27				border:1px solid #555;
28				margin-bottom:50px;
29				padding:10px;
30				}
31			
32			.chieLnk,
33			.chieCont{
34				border-radius:5px;
35				border:1px solid rgb(176,123,230);
36				padding:1em;
37				}
38			.chieLnk{display:block;}
39			.chieCont{margin-top:10px;}
40			.chieLnkCont::after{
41				content:"";
42				display:block;
43				width:0;height:0;
44				border-top:10px solid rgb(176,123,230);
45				border-right:20px solid transparent;
46				border-left:20px solid transparent;
47				margin:0 auto;
48				}
49			.reference{
50				border-radius:5px;
51				background:#eee;
52				padding:10px;
53				padding-bottom:30px;
54				margin:40px 20px;
55				}
56			.reference::before{
57				content:"reference \a";
58				white-space:pre;
59				position:relative;
60				top:calc( (1.5em + 10px) / -2);
61				left:0;
62				background:#fff;
63				border:1px solid #ddd;
64				border-radius:5px;
65				padding:0.5em;
66				}
67			.referenceSite::after{
68				content:"様";
69				}
70			
71		</style>
72		
73	</head>
74	
75	<body>
76		
77		<section id="Dec291">
78			
79			<!--■■CSSはここから！■■-->
80			<style scoped>
81				
82				.wrapper{
83					display:flex;
84					align-content:flex-start;
85					}
86				.wrapper> *{
87					flex:1 1 auto;
88					}
89				
90				.smplString{
91					padding:1em;
92					}
93				
94			</style>
95			<!--■■CSSはここまで！■■-->
96			
97			<div class="chieLnkCont">
98				20161229[01]
99				<a class="chieLnk" href="http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11168480076">
100				liタグ内で画像を左中央、テキストを画像の横で、左揃えにして上下中央に揃えるにはどうしたらいいでしょうか。</a>
101			</div>
102			
103			<div class="chieCont">
104				
105				<!--■■HTMLはここから！■■-->
106				
107				<span style="font-size:1.5em">２つのdivで囲んだver</span> (cssはstyle属性で指定)
108				<div style="margin-bottom:2em;">
109					<div style="display:inline-block; vertical-align:top;">
110						<img src="../150x150.png">
111					</div>
112					<div style="display:inline-block; vertical-align:top; width:70%;">
113						<p>家は舌のおじぎセロ団へ猫へしぶんたん。そしてどんどんいやましますという楽長だだ。</p>
114						<p>変なくましんないはたそして町のいや屋のときにはぱっとだめたいないて、何までけちの来れことたまし。出すぎ君は下で赤くましからいつかの人の楽器者をむしっ第一中人のかっかが云っで出しないます。</p>
115						<p>狸は前思うてっな。音は一出こどものようをわからて行っない。おしまいはゴーシュ楽長やそっちをひらいてやっまし。</p>
116					</div>
117				</div>
118				
119				<span style="font-size:1.5em" >flexでやろうとしたver</span> （画像が縦長になる問題の解決策を調査中）
120				<div class="wrapper">
121					
122					<img src="../150x150.png">
123					<div class="smplString">
124						<p>家は舌のおじぎセロ団へ猫へしぶんたん。そしてどんどんいやましますという楽長だだ。</p>
125						<p>変なくましんないはたそして町のいや屋のときにはぱっとだめたいないて、何までけちの来れことたまし。出すぎ君は下で赤くましからいつかの人の楽器者をむしっ第一中人のかっかが云っで出しないます。</p>
126						<p>狸は前思うてっな。音は一出こどものようをわからて行っない。おしまいはゴーシュ楽長やそっちをひらいてやっまし。</p>
127					</div>
128				</div>
129				<!--■■HTMLはここまで！■■-->
130				
131			</div>
132			
133			<div class="reference">
134				<span class="referenceSite">Scene Live</span><br>
135				<a href="http://scene-live.com/page.php?page=58">
136				【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します</a><br>
137			</div>
138			
139		</section>
140		
141	</body>
142	
143</html>

kei344

2016/12/28 08:33

HTMLおよびCSSを質問文に追記いただけませんか？

kei344

2017/01/09 06:24

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

-1an.vvks-

2017/01/09 06:28

テスト期間に入ってしまったのですっかり放置していました。すみません。

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

回答1件

ベストアンサー

chromeのインスペクターでCSSを以下の変更をしてみました。
必要ないものは調整してください。
お試しください。

CSS
1.wrapper {
2    display: flex;
3    -webkit-flex-direction: row;
4    flex-direction: row;
5    -webkit-justify-content: flex-start;
6    justify-content: flex-start;
7    -webkit-align-items: flex-start;
8    align-items: flex-start;
9}