Гибкий элемент переполняет контейнер из-за длинного слова даже после использования word-wrap

<div class="parent">
   <div class="child1">
     question
   </div>
  <div class="child2">
  somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

CSS

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

Основная проблема с указанным выше кодом - это переполнение child3, но если я дам max-width в child2, он не переполнит parent. В обоих случаях я использовал word-wrap: break-word;

Здесь вы можете проверить код http://jsfiddle.net/vbj10x4k/

Мне нужно знать, почему это происходит и как его решить, не используя max-width/width для фиксированных значений пикселей. Мне нужно, чтобы он был отзывчивым.

Ответы

Ответ 1

Вместо установки максимальной ширины для вашего элемента flex используйте объявление min-width.

По умолчанию, если не задана минимальная ширина, предполагается минимальная ширина содержимого элемента, и ширина элемента гибкости никогда не будет меньше. Если установить минимальную ширину, например, 40%, элемент будет сжиматься максимум до 40% от гибкого родителя.

.child2, .child3 {
  min-width: 40%;
}

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}
.child3{
  background-color:lightyellow;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
  <div class="child3">
    Works well with long URLs: <a href="#"> https://thisisadamnlongurlcontainingneitherhyphensoradditionalperiods.com</a>
  </div>
</div>

Ответ 2

Вместо word-wrap:break-word используйте word-break:break-all

CSS

.child1{
  background-color:mistyrose;
  padding:1em;
  word-break:break-all;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  max-width:500px;
  word-break:break-all;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-break:break-all;

}

вот рабочая ссылка http://jsfiddle.net/yudi/vbj10x4k/3/

Ответ 3

Я использую такую комбинацию, и она работает для меня в Chrome, Safari и Firefox.

.myOverflowableText {
  word-break: break-word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

На этом сайте говорится, что в Chrome & Safari поддерживается перерыв на слова https://caniuse.com/#feat=word-break.

Но я обнаружил, что решение Firefox должно быть overflow-wrap: anywhere на этом сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Я еще не уверен насчет IE... Может быть, word-wrap: break-word; работает на IE?

Моя цель заключается в следующем:

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |

Ответ 4

Благодаря ответу Гаурава Аггарвала я смог решить ту же проблему, используя свойство CSS:

word-break: break-word