フレックスアイテムの幅は、私はフレックスボックスが大好きですが、一列に並んでいるフレックスアイテムは、内容がなくても同じ高さに成長し、さらにページの下に追加項目を表示するのは苦痛だと分かります。理想的には、以前のアイテムがボックスを埋めるのに十分なコンテンツを持たず、大きなスペースを残していないときに、フレックスアイテムを利用可能なスペースに配置したいと思っています。フレックスボックスの幅（横）は伸びますが、縦（高さ）は伸びないようにします
これは私の知識が不足しているのか、それとも不可能なのでしょうか？それが不可能な場合は、施設等の更新
（申し訳ありません。私が説明するための図をアップロードしようとしましたが、私の評判は十分ではありません！）
[EDITに追加することができます。コードがリクエストとして追加されました。いくつかのスタイルは、空白を証明するために、私は他のフレックス項目に取り込まれたいを残した。]
<!doctype html>
<html>
<head>
<style>
.content {
font-size: 2em;
width: 100%;
margin: 0px;
padding: 0px;
background-color: coral;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
}
.flex-item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis:40vw;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
どうやら私の質問は、十分に明確ではありません！私はサイトの制約で試してみようとしますが、図を投稿することは許されません。
テキスト、画像、またはその両方を含むフレックスアイテムボックスがあります。画像を含むFlexアイテムボックスは、使用可能なスペースに合わせて縮尺されます。 高解像度では、テキストのみのボックスは幅と高さが同じです（正方形）ので、画像のサイズは正方形になり、すべてがチッパーになります。しかし、400 px幅のビューポートでは、テキストだけを含むボックスは長くなり（議論のために200 x 1000px）、イメージボックスは200 x 200px（四角形）になります。次の行は、フレックスアイテムテキストの下部の後に表示され、イメージの下に大きなギャップ（たとえば、800ピクセルの高さ）が残されます。他のフレックスボックスは、収縮した画像の後のスペースに収まる可能性がありますが、ギャップに移動しません。質問を保留にする明確な人々ですか？
あなたのHTMLコードを投稿してください。また、あなたの質問とは関係のないCSSの部分（色、枠線など）を切り取ってください。ダイアグラムを画像ホスティングサイトにアップロードしてからリンクしてください。 – BryanH
本当に問題を説明するために画像を投稿する必要がある場合は、[TinyPic]（http://tinypic.com/）などに投稿してURLを質問に入れてください。画像が実際に役立つ場合は、より高い担当者のユーザーが質問に追加します。 –