Flex项目超出其容器

Question

我有一个定义的Flex容器width.容器有flex-direction: row2列.一个是固定宽度,它是不灵活的.另一个是灵活的,应该适合所有容器的剩余空间.

当柔性柱内容足够长时,它会溢出容器,超过其宽度.

为什么会这样？我应该如何正确地修复它？

注意:我已经通过使用flex解决了它:1 0 0而不是1 0 auto,它会很好.但我只是不明白为什么它会停止超过父母以及它为什么开始包装内容？它甚至是正确的方法吗？

HTML:

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
 </div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: green;
}

.flex-item {
  display: block;
  margin: 20px 0;
}

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

该的jsfiddle

Answer 1

要获得预期的结果,还要指定.flexible类的宽度

.flexible { 
            flex: 1 0 auto; 
            width:200px;
            background-color: blue; 
            word-wrap:break-word;
   }

http://codepen.io/nagasai/pen/LkJzLz

Answer 2

随着flex: 1 0 auto在.flexible你设置以下

1. 1是flex-grow并且它会增长
2. 0为flex-shrink使您设置，为不缩水
3. auto就是flex-basis在这种情况下是指width这是由柔性项目的内容来确定。

另外，您不能display: block在flex容器中使用它不起作用。flex-direction的默认值为row，因此可以将其删除。您可以设置固定的宽度.inflexible这样flex: 0 0 100px;。而对于.flexible您来说，只需使用flex: 1它，它将占用其余的自由宽度。

.flex-container {
  display: flex;
  width: 500px;
  background-color: green;
}
.flex-item {
  margin: 20px 0;
}
.inflexible {
  flex: 0 0 100px;
  background-color: red;
}
.flexible {
  flex: 1;
  background-color: blue;
}

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
  </div>
</div>