Css Flex项超出其容器

我有一个定义了

宽度的flex容器。容器具有伸缩方向：行和两列。一种是固定宽度，它是不灵活的。另一个是灵活的，应该适合所有容器的剩余空间

当柔性列内容足够长时，它会溢出容器，超出其宽度

为什么会发生这种情况？我该如何正确地修复它

注意：我已经通过使用flex:1 0 0而不是1 0 auto解决了这个问题，它会很好。但是我不明白为什么它不再超过父级，为什么它开始包装内容？这是正确的方法吗

HTML:

如果我理解正确的话，
我认为您误解了这里的一两个
flex
值。考虑下面的CODEPTN：


看看这个：

.your-flex-item { /*(child, not container)*/
  flex: <flex-grow> <flex-shrink> <flex-basis>; 
}

如果您喜欢这样做，我建议将
auto
值更改为您所需的宽度，因此更像这样：

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

.flexible {
  flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
  background-color: blue;
}

更新
flex:10自动
只需
flex:1
在中。flexible。并删除flex:
flex:0自动来自。不灵活

要了解更多有关flexbox的信息，请选中复选框



.flex容器{
显示器：flex；
弯曲方向：行；
宽度：500px；
背景颜色：绿色；
}
.弹性项目{
显示：块；
利润率：20px0；
}
.不灵活{
flex:0自动；
宽度：100px；
背景色：红色；
}
.灵活{
弹性：10自动；
背景颜色：蓝色；
}
.解决方案.灵活{
弹性：100；
}
.问题{
边缘底部：20px；
}

Lorem ipsum dolor sit amet，奉献精英。驱虫剂，铜酸盐耳垢！暂时性体劳
Lorem ipsum dolor sit amet，奉献精英。根据《共和国宪法》修改的原则，建筑设计师应遵守《公共部门法》的规定，以保护公民权利，保护公民权利，保护公民权利。在，雷姆。
Lorem ipsum dolor sit amet，奉献精英。驱虫剂，铜酸盐耳垢！暂时性体劳
Lorem ipsum dolor sit amet，奉献精英。根据《共和国宪法》修改的原则，建筑设计师应遵守《公共部门法》的规定，以保护公民权利，保护公民权利，保护公民权利。在，雷姆。
在
中使用
flex:1 0 auto

1
是
flex-grow
并且设置为grow
0
是
flex-shrink
所以您将其设置为不收缩
auto
是
flex-basis
，在本例中，它指的是由flex-item的内容确定的
width
此外，您不能在flex容器中使用
display:block
，因为它不起作用。“弯曲方向”的默认值为“行”，因此可以删除该值。您可以设置
的固定宽度。不灵活的
如下
flex:0 100px。对于
.flexible
您可以只使用
flex:1
，它将占用剩余的自由宽度


.flex容器{
显示器：flex；
宽度：500px；
背景颜色：绿色；
}
.弹性项目{
利润率：20px0；
}
.不灵活{
flex:0100px；
背景色：红色；
}
.灵活{
弹性：1；
背景颜色：蓝色；
}

Lorem ipsum dolor sit amet，奉献精英。驱虫剂，铜酸盐耳垢！暂时性体劳
Lorem ipsum dolor sit amet，奉献精英。根据《共和国宪法》修改的原则，建筑设计师应遵守《公共部门法》的规定，以保护公民权利，保护公民权利，保护公民权利。在，雷姆。
中提到了以下关于弹性基础的内容：自动
：

长度等于柔性项目的长度。如果项目未指定长度，则长度将根据其内容确定

flex basis
是由
flex
属性速记设置的第三个属性

因此，如果将其设置为
auto
，
.flexible
div的最大宽度（取决于其内容）将是
display:flexible
容器的宽度。
要获得预期的结果，还需要指定.flexible类的宽度

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

柔性包装属性是柔性包装盒布局模块的子属性。
它定义了弹性项目是强制在一行中还是可以流到多行中。
flex wrap属性接受3个不同的值：
nowrap（默认）：单行，可能导致容器溢出
包裹：多条线，方向由弯曲方向定义
反向包裹：多条线，与“弯曲方向”定义的方向相反
所以
尝试使用flex wrap使flex项目成多行。
Romeno，是否将文本换行？这是预期的，因为固定宽度为“不灵活”，CSS中没有定义宽度，因此它不会根据内容换行并调整宽度为避免问题，请定义固定宽度为“灵活”。.flexible{flex:10自动；背景色：蓝色；}@长崎好吧，我还是不明白，但我想如果你回答了，我会接受的。）贴出来。）你现在可以把它标记为回答：）内部flex块的子项的显示值是多少？如果你的意思是在
flex容器中
，当你在某个元素上设置
display:flex
时，它的子项变成
flex项
，并且是d在flex布局模型中显示，因此其
显示
值变得无关？>/*10 auto将增长到允许其增长的任何“auto”值。在此处输入大小，使其“增长到”该大小。*/好吧…
flex basis:auto
指定
flex basis
使用
宽度
（
高度
如果
flex>）
.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

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

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

.flexible {
  flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
  background-color: blue;
}

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