How to make flexbox child not create horizontal scrolling - css

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>

Answer 1

If you're able to add some css, then this one could help you.
Update:
I've added the 'position: absolute;' to the rule in this way the h1 element is not expanding out of the div element and it's working in the IE.
Also you're possibly interested in the property 'word-wrap' with the value 'break-word'. This should help you to wrap the very very long words(or urls) without the white-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>

Answer 2

Add a max width to outerContainer1 and to the myDiv elements.
.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>