最小化窗口时文本丢失

Question

最小化窗口时文本丢失。

文本正在通过窗口的两侧而不是向下包裹。 尝试运行代码完整窗口，然后调整窗口宽度，并查看我的意思。

我找不到解决方案，请帮忙吗？

这是它应该是什么样子最小

这里的时候是小提琴链接：https://jsfiddle.net/zgLtbvyv/

/*everything is in a column*/ 
 
.mb-flex-column{ 
 
display: flex; 
 
    flex-direction: column;  
 
} 
 
    
 
    
 
/*image and text are in a row*/ 
 
    .mb-flex-row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
     align-content: center; 
 
}  
 
/*Flex to aligne the image and text correctly, and make them stick to the side*/ 
 
.mb-flex-item:nth-child(odd) .mb-flex-row{ 
 
     flex-direction: row-reverse; 
 
    } 
 

 
.mb-content-wrap{ 
 
    display: table; 
 
    overflow: hidden; 
 
} 
 
    
 
.mb-content{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    } 
 
    
 
h4{ 
 
    text-align: left; 
 
    padding-top: 0; 
 
} 
 

<div id=mb-gara-mobile> 
 
    <div class="mb-flex-column black"> 
 
       <div class="mb-flex-item"> 
 
        <div class="mb-flex-row"> 
 
         <div class="image-wrap"> 
 
          <img src="svg/gara1.svg" alt=""> 
 
         </div> 
 
         <div class="mb-content-wrap"> 
 
          <div class="mb-content"> 
 
           <h4>Fornøydsgaranti</h4> 
 
            De to første øktene er gratis, og du kan kanslerere når du vil. 
 
            Fornøydsgarantien gjelder alle elever. 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="svg/gara2.svg" alt=""> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Karaktergaranti</h4> 
 
         Jeg refunderer 100% av totalbeløpet dersom jeg feiler med å forbedre karakteren til eleven. Gjelder for elever med startkarkater: 2, 3 eller 4. 
 
         Karaktergarantien gjelder kun for elever som har hatt mer enn 15 timer med med meg. 
 
        </div> 
 
       </div>   
 
      </div> 
 
     </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="svg/gara3.svg" alt=""> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Oppfølgingsgaranti</h4> 
 
         Hver lørdag fra kl 0800-1200 setter jeg av en halvtime per elev til oppfølging. I stedet for å møte en gang hver uke, møtes vi to ganger i uken. Oppfølgingen er gratis. Oppfølgingsgarantien gjelder for alle elever. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

在CSS的微小变化：

.mb-content-wrap { 
    /*display:table;*/ 
    display:block; 
    overflow: hidden; 
} 

Answer 2

/*everything is in a column*/ 
 
.mb-flex-column{ 
 
display: flex; 
 
    flex-direction: column;  
 
} 
 
    
 
    
 
/*image and text are in a row*/ 
 
    .mb-flex-row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
     align-content: center; 
 
}  
 
/*Flex to aligne the image and text correctly, and make them stick to the side*/ 
 
.mb-flex-item:nth-child(odd) .mb-flex-row{ 
 
     flex-direction: row-reverse; 
 
    } 
 

 
.mb-content-wrap{ 
 
    word-wrap: break-word; 
 
    display:block; 
 
    overflow: hidden; 
 
} 
 
    
 
.mb-content{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    } 
 
    
 
h4{ 
 
    text-align: left; 
 
    padding-top: 0; 
 
}

<div id=mb-gara-mobile> 
 
    <div class="mb-flex-column black"> 
 
       <div class="mb-flex-item"> 
 
        <div class="mb-flex-row"> 
 
         <div class="image-wrap"> 
 
          <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
         </div> 
 
         <div class="mb-content-wrap"> 
 
          <div class="mb-content"> 
 
           <h4>Fornøydsgaranti</h4> 
 
            De to første øktene er gratis, og du kan kanslerere når du vil. 
 
            Fornøydsgarantien gjelder alle elever. 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Karaktergaranti</h4> 
 
         Jeg refunderer 100% av totalbeløpet dersom jeg feiler med å forbedre karakteren til eleven. Gjelder for elever med startkarkater: 2, 3 eller 4. 
 
         Karaktergarantien gjelder kun for elever som har hatt mer enn 15 timer med med meg. 
 
        </div> 
 
       </div>   
 
      </div> 
 
     </div> 
 
     <div class="mb-flex-item"> 
 
      <div class="mb-flex-row"> 
 
       <div class="image-wrap"> 
 
        <img src="http://mathsmattersresources.com/wp-content/uploads/Right-Angle-Triangle-Blue-John-Duffield1.png" alt="" style="height:50px"> 
 
       </div> 
 
       <div class="mb-content-wrap"> 
 
        <div class="mb-content"> 
 
         <h4>Oppfølgingsgaranti</h4> 
 
         Hver lørdag fra kl 0800-1200 setter jeg av en halvtime per elev til oppfølging. I stedet for å møte en gang hver uke, møtes vi to ganger i uken. Oppfølgingen er gratis. Oppfølgingsgarantien gjelder for alle elever. 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>