如何使flexbox子不创建水平滚动答案

【问题标题】：How to make flexbox child not create horizontal scrolling如何使flexbox子不创建水平滚动
【发布时间】：2018-11-02 22:25:37
【问题描述】：

这里的场景是我将一个使用 Flexbox 的 React 标头组件导入到一个包含大量 Flexbox css 的页面上。我只能访问myDiv（并且可以创建任意数量的 div 包裹它），但我正在努力让标头组件截断或包裹到多行。

如果我指定页面的特定宽度（以像素为单位），我的问题就解决了，但是有没有办法告诉标题组件不要扩展到给定的空间之外？ 这也需要在 IE11 中工作。

希望获得一些有关如何调试此场景的提示。谢谢！

.myDiv { // Can edit this class

}
.outerContainer3 { // Cannot edit this class
  margin-top: 0;
  flex-direction: column;
  flex: 1 0 auto;
  display: flex;
}

.outerContainer2 { // Cannot edit this class
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}

.outerContainer1 { // Cannot edit this class
  position: relative;
  flex: 1 1 auto;
}

.headerContainer2 { // Cannot edit this class
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.headerContainer1 { // Cannot edit this class
  min-width: 0%;
  flex-shrink: 1;
  width: 100%;
}

.header { // Cannot edit this class
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outerContainer3">
  <div class="outerContainer2">
    <div class="outerContainer1">
      <div>
        <div>
          <div class="myDiv">
            <div class="headerContainer2">
              <div class="headerContainer1">
                <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

在.outerContainer1上添加width: 100%;
很遗憾我无法编辑outerContainer1的css
除了固定宽度或100vw，问题来自祖先或.myDiv，他们无法控制宽度为视口的 100%，所以如果孩子们决定在他们的宽度上涂胭脂，他们将能够这样做。由于您使用的是react，我建议您使用它为.myDiv 应用宽度。
太糟糕了，我希望有一些神奇的解决方案。其他人删除了他们的答案，即从.header 中删除white-space: nowrap;（有效），有没有办法在不直接编辑.header 并且不知道.header 的类名的情况下做到这一点？跨度>
.myDiv h1 这将选择h1 内的所有h1 元素，但如果只有一个，那就是那个。

标签： css flexbox horizontal-scrolling

【解决方案1】：

如果您能够添加一些 css，那么这个可以帮助您。

更新：我添加了“位置：绝对；”以这种方式遵守规则，h1 元素不会从 div 元素扩展出来，而是在 IE 中工作。
另外，您可能对值为“break-word”的属性“word-wrap”感兴趣。这应该可以帮助您在没有空格的情况下包装非常长的单词（或 url）。

.myDiv { // Can edit this class

}
.myDiv > div > div > h1 {
  white-space: inherit;
  position: absolute;
}
.outerContainer3 { // Cannot edit this class
  margin-top: 0;
  flex-direction: column;
  flex: 1 0 auto;
  display: flex;
}

.outerContainer2 { // Cannot edit this class
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}

.outerContainer1 { // Cannot edit this class
  position: relative;
  flex: 1 1 auto;
}

.headerContainer2 { // Cannot edit this class
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.headerContainer1 { // Cannot edit this class
  min-width: 0%;
  flex-shrink: 1;
  width: 100%;
}

.header { // Cannot edit this class
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outerContainer3">
  <div class="outerContainer2">
    <div class="outerContainer1">
      <div>
        <div>
          <div class="myDiv">
            <div class="headerContainer2">
              <div class="headerContainer1">
                <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

虽然事实证明这在 IE11 中不起作用，但关于是否存在错误的任何想法？
实际上“空白”也应该在 IE 中工作，但似乎有一些问题（嘿，就像 IE 上的所有内容一样！）...无论如何，我已经通过添加“位置：绝对”更新了答案' 在样式规则中。这样，h1 元素的宽度不会超出 div 元素，并且“空白：继承”可以正常工作。

【解决方案2】：

为 outerContainer1 和 myDiv 元素添加最大宽度。

.myDiv {
    max-width: 100%;
}
.outerContainer3 {
  margin-top: 0;
  flex-direction: column;
  flex: 1 0 auto;
  display: flex;
}

.outerContainer2 {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}

.outerContainer1 {
  position: relative;
  flex: 1 1 auto;
  max-width: 100%;
}

.headerContainer2 {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.headerContainer1 {
  min-width: 0%;
  flex-shrink: 1;
  width: 100%;
}

.header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outerContainer3">
  <div class="outerContainer2">
    <div class="outerContainer1">
      <div>
        <div>
          <div class="myDiv">
            <div class="headerContainer2">
              <div class="headerContainer1">
                <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

很遗憾我无法编辑outerContainer的css