Unable Breite von Flexbox Boxen zu beheben

Question

Ich versuche Flexbox zu nutzen - drei Boxen in einer Reihe - aber was passiert ist:

Inhalt in box3 nach rechts (Text) drückt Inhalt in box1 nach links (ein Bild), so dass das Bild gequetscht und verengt wird.

Dieses Problem kann direkt unter dem Schieberegler oben auf meiner Homepage gesehen werden: http://localnepaltoday.com Ich habe fünf Bilder auf der linken Seite mit Text auf der rechten Seite.

Was anscheinend passiert ist:

Wenn der Text in box3 nach rechts für alle Bilder identisch ist, die Breite der Bilder auch. Wenn nicht, wird die Breite variieren, wenn Text die Bilder zusammendrückt. Um

illustrieren:

In Bild fünf von unten, nur wenigen j-Buchstaben am Ende „da“ bedeutet, dass der erste Satz wird immer länger, und so wird das Bild gequetscht.

Was kann ich tun, um die Breite von box3 zu fixieren oder einzufrieren, damit das Bild in Box1 nicht komprimiert wird und das Bild schmaler wird?

Oder mit anderen Worten, wie kann ich die Bilder in der linken Zeile machen? (Sie werden ansonsten mit genau denselben Abmessungen hochgeladen).

Vielen Dank für jede Hilfe mit diesem.

Hier ist der html:

http://codepen.io/localnepal/pen/ZBLLjV 

Die CSS:

twocolumns{display: flex; display:-webkit-flex;} 
    .box .entry img {max-width: 200px;} box1 {height: 120px;  
    width:35%;flex-grow:0; flex-shrink:0;} box2 {height: 120px; width: 
    15%;flex-grow:0; flex-shrink:0;} box3 {height: 120px; width: 
    40%;flex-grow:0; flex-shrink:0;} 

Cheers, Hans

Answer 1

Try flex: 0 0 200px; anstelle der traditionellen width zu verwenden. Es bedeutet, dass Element wird immer 200px sein, wachsen nicht und nicht schrumpfen