Html flexbox中的换行字不符合100%宽度限制_Html_Css_Flexbox_Word Wrap

Html flexbox中的换行字不符合100%宽度限制

html css

Html flexbox中的换行字不符合100%宽度限制,html,css,flexbox,word-wrap,Html,Css,Flexbox,Word Wrap,我有两个flexbox，其中一个里面有一个flexbox。如果文本比其父文本大，我希望文本分成多行。由于某种原因，如果我发送一个固定值（例如250px）作为宽度，它就会工作。如果我将宽度设置为100%，它将不会分成多行这是我的代码： #flexparent{ 显示器：flex } #flexchild1{ 弹性：1；背景颜色：绿色； } #flexchild2{ 弹性：1；背景色：红色；显示器：flex； flex-flow：列 } #flexchild3{ 背景颜色：紫色；宽度：

我有两个flexbox，其中一个里面有一个flexbox。如果文本比其父文本大，我希望文本分成多行。由于某种原因，如果我发送一个固定值（例如250px）作为宽度，它就会工作。如果我将宽度设置为100%，它将不会分成多行

这是我的代码：

#flexparent{
显示器：flex
}
#flexchild1{
弹性：1；
背景颜色：绿色；
}
#flexchild2{
弹性：1；
背景色：红色；
显示器：flex；
flex-flow：列
}
#flexchild3{
背景颜色：紫色；
宽度：100%；
单词包装：打断单词；
}


FLEXCHILD1
FLEXCHILD2
这是一项超长期的研究。该研究的主要目的是研究连续性给药或给药期间给药的药物或给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药最大限度地减少医疗费用或医疗费用，减少医疗费用或医疗费用，减少医疗费用或医疗费用UIDOLORUMILLUMTEMPERMIBUSQUORRCUMQUEEXIMTMAGNAT

问题在于基于百分比的宽度是基于直接父项的宽度。如果直接父项没有

宽度

，则子项无法知道任意值的

100%

是什么

flex:1

是包含

flex grow:1

的缩写，这意味着

#flex2

可以无限增长，而无需设置此

宽度

约束

基于百分比的宽度冒泡到一个固定的

宽度

已知的点，因此您所要做的就是将

宽度

设置为

100%

的

\flexchild2

，以便

\flexchild3

继承

\flexparent

的宽度：

这可以从以下几点看出：

#flexparent{
显示器：flex；
}
#flexchild1{
弹性：1；
背景颜色：绿色；
}
#flexchild2{
弹性：1；
背景色：红色；
显示器：flex；
柔性流动：柱；
宽度：100%；
}
#flexchild3{
背景颜色：紫色；
宽度：100%；
单词包装：打断单词；
}


FLEXCHILD1
FLEXCHILD2
这是一项超长期的研究。该研究的主要目的是研究连续性给药或给药期间给药的药物或给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药最大限度地减少医疗费用或医疗费用，减少医疗费用或医疗费用，减少医疗费用或医疗费用UIDOLORUMILLUMTEMPERMIBUSQUORRCUMQUEEXIMTMAGNAT

这是一个最小宽度问题，其中弹性项不能小于其内容

minwidth

的默认值是

auto

，在这种情况下，它发生在flex项目

#flexchild2

给它

最小宽度：0

，它就会工作

此外，不需要

width:100%

，因为flex“column”项的

对齐项默认为拉伸
，因此自动获取其父项的全宽，并且可以删除
堆栈片段

#flexparent{
显示器：flex
}
#flexchild1{
弹性：1；
背景颜色：绿色；
}
#flexchild2{
弹性：1；
背景色：红色；
显示器：flex；
柔性流动：柱；
最小宽度：0；/*已添加*/
}
#flexchild3{
背景颜色：紫色；
/*宽度：100%；已移除*/
单词包装：打断单词；
}

FLEXCHILD1
FLEXCHILD2
这是一项超长期的研究。该研究的主要目的是研究连续性给药或给药期间给药的药物或给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药持续性给药最大限度地减少医疗费用或医疗费用，减少医疗费用或医疗费用，减少医疗费用或医疗费用UIDOLORUMILLUMTEMPERMIBUSQUORRCUMQUEEXIMTMAGNAT
宽度：100%
必须继续\flexparent
，而不是\flexchild3
，当允许父对象无限增长时，子对象上没有宽度：100%
（flex:1
on\flexchild2
），只需将最小宽度：0
添加到\flexchild2
，如@LGSon所示。这里有一个完整的解释：将单词break:breakall添加到您的第一个代码段中，就在单词wrap之后，或者改为单词wrap。。。并看到它的工作。至少在FF@LGSon不确定最小宽度是这里唯一的东西（并且是重复的）：它以某种方式与布局有关，但也与使用的规则有关。在这里，您可能只需要单词break。@G-Cyr使用单词break:break all是它也打破了不恰当的字眼，i.a.发生在Chrome中，这里的问题实际上是隐含的最小尺寸，最好是这样