即使在使用自动换行之后，flex项目也会由于长字而溢出容器 [英] flex item overflows container due to long word even after using word-wrap

问题描述

 < div class =parent> 
< div class =child1> 
问题
< / div> 
< div class =child2> 
 somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething 
  

 < div class =parent> 
< div class =child1> 
问题
< / div> 
< div class =child3> 
 somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething 
将/ DIV> 
< / div> 
  

CSS

  .parent {
 width：100％; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：nowrap; 
填充：1em; 
 background-color：red; 
 box-sizing：border-box; 
} 
 .child1 {
 background-color：mistyrose; 
填充：1em; 
} 
 
 .child2 {
 background-color：powderblue; 
填充：.5em; 
 word-wrap：打破单词; 
 max-width：500px; 
} 
 .child3 {
 background-color：powderblue; 
填充：.5em; 
 word-wrap：打破单词; 
 
 
 
 
 $ p 
 $ b 
上面代码的主要问题是 child3 溢出，但是如果我在 child2 中给出 max-width 不会溢出父母。在这两种情况下，我都用 word-wrap：break-word;  
 
 
 
    http://jsfiddle.net/vbj10x4k/  
 
 
 
我需要知道为什么会发生这种情况，以及如何在不使用 max-width / width 来修复像素值的情况下解决这个问题。我需要它为您的Flex项目设置最大宽度，而不是使用最小宽度声明。 
 
 
 
默认情况下，如果未设置最小宽度，则假定项目的内容最小宽度，并且Flex项目的宽度永远不会更小。通过设定最小宽度例如50％，这个项目会缩小到flex父母的最多50％。 
 
 
  .child2，.child3 {
最小宽度：50％; 
 
 
 
 $ b 
 
 
 <重写>  .parent {width：100％;显示：弯曲;挠曲方向：行;柔性包裹物：NOWRAP;填充：1em的;背景色：红色; box-sizing：border-box;}。child1 {background-color：mistyrose; padding：1em;}。child2 {background-color：powderblue;填充：.5em;自动换行：打破字; min-width：50％;}。child3 {background-color：powderblue;填充：.5em;自动换行：打破字; min-width：50％;}  
 
 < div class = 父 > < div class =child1>问题< / div> < div class =child2> somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething< / DIV>< / DIV>  

见上面的代码片段或外部演示： http://jsfiddle.net/vbj10x4k/5/

<div class="parent">
   <div class="child1">
     question
   </div>
  <div class="child2">
  somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

CSS

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

The main issue with the above code is ,child3 overflows but if I give a max-width in child2it will not overflow the parent. In both cases I used word-wrap: break-word;

You can check the code here http://jsfiddle.net/vbj10x4k/

I need to know why it happens and how to solve it without using max-width/width to fixed pixel values.I need it to be responsive.

解决方案

Instead of setting a max-width for your flex item, use a min-width declaration.

By default, if no min-width is set, the item's content min-width is assumed and the flex item's width will never be smaller. By setting a min-width of e.g. 50%, the item will shrink to at most 50% of the flex parent.

.child2, .child3 {
  min-width: 50%;
}

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  min-width: 50%;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  min-width: 50%;
}
  

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
</div>

See the code snippet above or the external demo: http://jsfiddle.net/vbj10x4k/5/

这篇关于即使在使用自动换行之后，flex项目也会由于长字而溢出容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！