css - How to make flexbox child not create horizontal scrolling

Question

The scenario here is that I am importing a React header component that uses Flexbox onto a page that is wrapped in a lot of Flexbox css. I only have have access to myDiv (and can create as many divs as I want wrapped around it), but I am struggling with getting the header component to either truncate or wrap onto multiple lines.

My problems are solved if I specify a specific width of the page in pixels, but is there some way to tell the header component not to expand outside the space it is given? This also needs to work in IE11.

Would love some tips on how to debug this scenario. Thanks!

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

标签： cssflexboxhorizontal-scrolling

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