如何使 flexbox child 不创建水平滚动

Question

这里的场景是我正在将一个使用 Flexbox 的 React header 组件导入到一个被大量 Flexbox css 包裹的页面上。我 只能访问 myDiv （并且可以创建尽可能多的 div，但我想把它包裹起来），但我正在努力让 header 组件截断或换行到多行。

如果我指定页面的特定宽度（以像素为单位），我的问题就解决了，但是有什么方法可以告诉 header 组件不要扩展到给定的 space 之外吗？ 这也需要在 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>

Answer 1

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

Answer 2

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

更新：我以这种方式将 'position: absolute;' 添加到规则中，h1 元素不会扩展到 div 元素之外，并且它在 IE 中工作。
您可能还对属性 'word-wrap' 感兴趣，其值为 'break-word '.这应该可以帮助您包装非常长的单词（或网址）而无需白色-space.

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

如何使 flexbox child 不创建水平滚动

How to make flexbox child not create horizontal scrolling

css

horizontal-scrolling

flexbox