как сделать ширину flex контейнера равной ширине его содержимого?
У меня четыре flex div у каждого из которых display flex, они располагаются друг под другом, но при этом занимают всю ширину окна. Как сделать чтобы ни были такой же шириной как и содержимой в них?
.info_block{
display:flex;
flex-wrap: nowrap;
max-height: 60px;
border-bottom: .2px solid #A8C6EC;
background-color: #D9EDF7;
padding: 7px;
}<div class="info_block">
<img src="image/image-1.jpg" alt="" class="info_block__image">
<div class="info_block__text">
<h3 class="info_block__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet assumenda, voluptate rerum quidem cupiditate cum, officia rem natus officiis tempora deserunt libero iure ipsa. Maiores qui incidunt esse, illum culpa aut hic dolor facere assumenda sequi tenetur, dolore reiciendis ratione quis, sed molestiae quidem.</h3>
<p class="info_block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quae, ad minus impedit mollitia quos, ea labore molestias quam debitis rem magni aspernatur recusandae vitae inventore. Fugit placeat laborum cum, at dolorem provident rerum corrupti laudantium soluta vel, dolorum repudiandae!</p>
</div>
<button type="button" class="info_block__button">Подробнее</button>
</div>
<div class="info_block">
<img src="image/image-2.jpg" alt="" class="info_block__image">
<div class="info_block__text">
<h3 class="info_block__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet assumenda, voluptate rerum quidem cupiditate cum, officia rem natus officiis tempora deserunt libero iure ipsa. Maiores qui incidunt esse, illum culpa aut hic dolor facere assumenda sequi tenetur, dolore reiciendis ratione quis, sed molestiae quidem.</h3>
<p class="info_block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quae, ad minus impedit mollitia quos, ea labore molestias quam debitis rem magni aspernatur recusandae vitae inventore. Fugit placeat laborum cum, at dolorem provident rerum corrupti laudantium soluta vel, dolorum repudiandae!</p>
</div>
<button type="button" class="info_block__button">Подробнее</button>
</div>
<div class="info_block">
<img src="image/image-3.jpg" alt="" class="info_block__image">
<div class="info_block__text">
<h3 class="info_block__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet assumenda, voluptate rerum quidem cupiditate cum, officia rem natus officiis tempora deserunt libero iure ipsa. Maiores qui incidunt esse, illum culpa aut hic dolor facere assumenda sequi tenetur, dolore reiciendis ratione quis, sed molestiae quidem.</h3>
<p class="info_block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quae, ad minus impedit mollitia quos, ea labore molestias quam debitis rem magni aspernatur recusandae vitae inventore. Fugit placeat laborum cum, at dolorem provident rerum corrupti laudantium soluta vel, dolorum repudiandae!</p>
</div>
<button type="button" class="info_block__button">Подробнее</button>
</div>
<div class="info_block">
<img src="image/image-3.jpg" alt="" class="info_block__image">
<div class="info_block__text">
<div class="info_block__title-wrapper"><h3 class="info_block__title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet assumenda, voluptate rerum quidem cupiditate cum, officia rem natus officiis tempora deserunt libero iure ipsa. Maiores qui incidunt esse, illum culpa aut hic dolor facere assumenda sequi tenetur, dolore reiciendis ratione quis, sed molestiae quidem.</h3></div>
<div class="info_block__desc-wrapper"><p class="info_block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quae, ad minus impedit mollitia quos, ea labore molestias quam debitis rem magni aspernatur recusandae vitae inventore. Fugit placeat laborum cum, at dolorem provident rerum corrupti laudantium soluta vel, dolorum repudiandae!</p></div>
</div>
<button type="button" class="info_block__button">Подробнее</button>
</div>Источник: Stack Overflow на русском