Ein erneuter TRY and ERROR / Websiteprojekt / Cardlayout

[einsiedler]

Hallo Leute, nach längerer Zeit sitze ich nun wieder an meinem Projekt, einer Portal-Seite.
Noch bearbeitet werden muss das Menue im header und der footer und die Verlinkung.
Momentan bin ich nun soweit (ich habe da mal etwas angepasst ;o)) )
Portal Testseite
Da habe ich im IE 10 noch das Problem, wohl wegen dem border-box Problem,
das DIE Items (das erste, dritte und fünfte) die ohnehin 100% breit sind (bei allen
anderen Browsern) breiter angezeigt werden und ins nächste Item überragen.
Diesem drei Items habe ich ein
flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 4px);

mitgegeben und nun zeigt auch der IE 10 die richtige Breite an. Doch nun habe ich das Problem mit dem Text neben dem Image, das überragt immer ins
nächste Item. Ich nehem an das hat mit dem border-box zu tun oder? Meine Lösung, die mir aber missfällt ist, wie dem figure-Bereich eine feste Breite
mitzugeben, das habe ich derzeit auch so gemacht.

      .bmuehlbauerpw section figure,  
      .tabekame section figure,  
      .bmuehlbauerep section figure {  
         margin: 0.7rem 0.3rem 0.5rem 0.3rem;  
         flex-grow: 0;  
         flex-shrink: 0;  
         flex-basis: 39%;  
         border: 1px dotted grey;  
         /*align-self: center;*/  
      }  
     .bmuehlbauerpw section div,  
      .tabekame section div,  
      .bmuehlbauerep section div {  
         flex-grow: 0;  
         flex-shrink: 0;  
         flex-basis: 52%;  
         border: 1px dotted grey;  
      }

Die anderen Browsern denen ist es egal und passen den Text (im div= neben dem Bild den
restlichen platz an, ja o.k. , mir gefällt es jetzt nicht dem div-Bereich konkrete 52%
mitzugeben, der Wert stimmt ja auch nicht, weil es eigentlich 61% sein müssten.
100% - (figure-Bereich, also 39%) = X Und alles nur wieder wegen dem IE! Also der 10ner... Was mache ich nun .. ???
Ich wollte nun ausprobieren:

*, ::before, ::after {
			box-sizing: border-box;  
			box-sizing: inherit;  
			
			margin: 0;  
			padding: 0;  
                     }
Das, was nun dort steht:  
 * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
dadurch ersetzen?   
Und zusätzlich dieses:  
.bmuehlbauerpw section div,    
.tabekame section div,  
.bmuehlbauerep section div {    
flex-grow: 0;    
flex-shrink: 0;    
flex-basis: 52%;    
border: 1px dotted grey;    
} 

dann wieder weg!!!

Was ist zu tun???

Gruß der einsiedelnde