Как сделать flexbox дочерним, чтобы не создавать горизонтальную прокрутку

Question

Сценарий здесь заключается в том, что я импортирую компонент заголовка React, который использует Flexbox, на страницу, которая обернута во многие 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>

Answer 1

Если вы можете добавить немного CSS, то этот может помочь вам.

Обновление: я добавил 'position: absolute;' согласно правилу, элемент h1 не расширяется из элемента div и работает в IE.
Также вас может заинтересовать свойство ' word-wrap ' со значением ' break-word '. Это должно помочь вам обернуть очень длинные слова (или 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>

Answer 2

Добавьте максимальную ширину к externalContainer1 и к элементам 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>