html – 即使在使用自动换行后,flex项也因长字而溢出容器

发布时间：2020-12-14 21:22:31 所属栏目：资源来源：网络整理

导读：div class="parent" div class="child1" question /div div class="child2" somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsometh

<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;

}

上面代码的主要问题是，child3溢出但是如果我在child2it中给出max-width则不会溢出父代。在这两种情况下，我都使用自动换行：break-word;

你可以在这里查看代码http://jsfiddle.net/vbj10x4k/

我需要知道它为什么会发生以及如何在不使用max-width / width到固定像素值的情况下解决它。我需要它具有响应性。

解决方法

不要为flex项设置最大宽度，而是使用最小宽度声明。

默认情况下，如果未设置最小宽度，则假定项目的内容最小宽度，并且弹性项目的宽度将永远不会更小。通过设置例如最小宽度50％，该项目将缩小至最多50％的flex父级。

.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;
  overflow-wrap: break-word;
  min-width: 50%;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 50%;
}

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

  </div>
</div>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!