Flexbox方向列-列宽与第二列相同

Question

我正在尝试创建宽度相等的3行（基于第二行）。

第一行：文字 第二行：图片 第三行：文字

图像宽度不得大于实际图像宽度。但是允许它缩小（因此它的宽度不比屏幕宽度宽-已经知道了）。 其他行（文本行）应与图像的宽度相同。我用flexbox尽了最大的努力，但似乎没有使它工作。

HTML：

<div class="content">
            <div class="first">
                Text Text Text Text
            </div>

            <img class="second" src="https://s3.amazonaws.com/media.eremedia.com/uploads/2012/08/24111405/stackoverflow-logo-700x467.png" />

            <div class="third">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>

CSS：

.content {
  display: inline-flex;
  flex-direction: column;  
}

.first {
  background-color: green;
  display: inline-block;
}

.second { /* image */
  align-self: center;
  border: 1px solid red;
  max-width: 100%;
}

.third {
  display: inline-block;
  overflow-wrap: break-word;
  background-color: green;
}

JSFiddle： http://jsfiddle.net/djb7z2m3/7/

还有其他方法吗，或者我只是想念任何东西吗？尝试了很多类似flex-basis / grow / shrink和align的东西，但没有得到我期望的结果。