文本未包含在chrome中的flexbox网格中

Question

CodePen：http://codepen.io/anon/pen/dYKGwV?editors=110

我有这个HTML：

<div class="Box Box--row" style="width: 20em; border: 1px solid black">
   <div class="Box Box--column">Avatar</div>
   <div class="Box Box--column">
     <div class="Box Box--row">
       <div class="Box">Name</div>
       <div class="Box">6:30pm</div>
     </div>
     <div style="max-width: 100%; width: 100%;">
        This is some text. This is some text. This is some text. This is some text. This is some text.
     </div>
   </div>
</div>

和CSS：

.Box {
  box-sizing: border-box;
  position: relative;
  border: 0 solid black;
  margin: 0;
  padding: 0;

  align-items: stretch;
  justify-content: flex-start;
  flex-shrink: 0;
  display: flex;

  &--row { flex-direction: row; }
  &--column { flex-direction: column; }
}

但它呈现如下：

它在Firefox中有用。如何获取文本？

Answer 1

为什么要将flex-shrink设置为0？当我将它设置为1时，它可以正常工作。

Answer 2

选项＃1：调整宽度属性

你给文本div一个100％的宽度：

<div style="max-width: 100%; width: 100%;">
This is some text. This is some text. This is some text. 
This is some text. This is some text.
</div>

演示：http://jsfiddle.net/db2udqhp/

您可以限制width，文本将换行：

<div style="width: 50%;">
This is some text. This is some text. This is some text. 
This is some text. This is some text.
</div>

演示：http://jsfiddle.net/db2udqhp/1/

选项＃2：使用flex属性

将flex: 1应用于包含带文本的div的Flex项目。这使得flex项目变得灵活，并强制它使用容器中的空闲空间。

div.Box.Box--row[style] > div.Box.Box--column:last-child { flex: 1; }

演示：http://jsfiddle.net/db2udqhp/4/
修改后的Codepen：http://codepen.io/anon/pen/GpGZaK?editors=110