我有一个带有已定义width的flex容器。容器有flex-direction: row和2列。一种是固定宽度,它是固定的。另一个很灵活,应该适合所有容器的剩余空间。

当灵活的列内容足够长时,它将使容器溢出,并超出其宽度。

为什么会发生?我应该如何正确解决呢?

注意:我已经通过使用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

最佳答案

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

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

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

关于css - flex 物品超出其容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38723559/

10-12 13:10
查看更多