I am making a widget and there was a problem when I reduce the window, the widget's drawing is reduced, it's all about the amount of text, img is fixed, a block is made on flexs.

.widget{ position: relative; width: 100%; padding-top: 65px; padding-bottom: 65px; border: 1px solid @border; margin-bottom: 63px; &__title{ font-size: 30px; font-weight: 400; line-height: 40px; margin-bottom: 19px; letter-spacing:6px; } &__cont{ padding-left: 61px; padding-right: 61px; padding-top: 26px; width: 100%; } &__post{ position: relative; width: 100%; margin-bottom: 12px; display: flex; flex-direction: row; } &__img{ margin-right: 38px; max-width: 114px; width: 100%; height: 65px; overflow: hidden; >a{ display: block; } img{ height: 100%; } } &__posttitle{ line-height: 20px; font-size: 15px; font-weight: 400; letter-spacing:3px; } &__posttitle-pos{ margin-top: -5px; margin-bottom: 8px; } &__date{ color: @tags; font-size: 15px; font-weight: 400; letter-spacing:3px; } } 
 <div class="widget"> <h3 class="title widget__title main-text"><span></span>LATEST POSTS</h3> <div class="widget__cont"> <div class="widget__post"> <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost1.jpg" alt=""></a></div> <div class="widget__about"> <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title"> Living in Los Angeles </h4></a> <span class="widget__date main-text">OCTOBER 16, 2016</span> </div> </div> </div> <div class="widget__cont"> <div class="widget__post"> <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost2.jpg" alt=""></a></div> <div class="widget__about"> <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">10 LIFE CHANGING MOMENTS FROM 10 YEARS AS A NOMAD around the world </h4></a> <span class="widget__date main-text">OCTOBER 16, 2016</span> </div> </div> </div> <div class="widget__cont"> <div class="widget__post"> <div class="widget__img hidden-xs "><a href=""><img src="/img/wpost3.jpg" alt=""></a></div> <div class="widget__about"> <a href=""><h4 class="widget__posttitle widget__posttitle-pos main-text hover__title">MY GUIDE TO ASIAN FOOD</h4></a> <span class="widget__date main-text">OCTOBER 16, 2016</span> </div> </div> </div> </div>

    2 answers 2

    To prevent the descendant of the flex container from decreasing, it needs to set the flex-shrink: 0 property flex-shrink: 0 . In your case, this property must be added to the .widget__img block.

    • Thank you very much, your help was very useful to me! - Alexander Alekseev

    You also have the maximum width, and then the relative. That is, the size of the parent element and builds

     &__img{max-width: 114px; width: 100%;}

    Need to change to something like

     width: 100px;