无法修复 flexbox 框的宽度

Question

我正在尝试使用 flexbox - 连续三个盒子 - 但发生的情况是：

box3 中的内容向右（文本）将 box1 中的内容向左推（图像），从而使图像被挤压变窄。

这个问题可以在我主页顶部的滑块下方看到：http://localnepaltoday.com 我左边有五张图片，右边有文字。

显然发生的是：

如果右侧框 3 中的文本对于所有图像都相同，则图像的宽度也相同。但如果不是，宽度会随着文本挤压图像而变化。

举例说明：

图片倒数五，“since”后面几个j字母表示第一句话变长了，所以图片被挤压了。

如何固定或冻结 box3 的宽度，使其不会挤压 box1 中的图像并使图像变窄？

或者换句话说，我怎样才能让左边的图像对齐？ （否则它们会以完全相同的尺寸上传）。

非常感谢您对此提供的任何帮助。

这是html：

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

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;}

干杯， 汉斯

Answer 1

尝试使用flex: 0 0 200px; 而不是传统的width。这意味着元素将始终为 200px、不增长和不缩小