Как сделать, чтобы длинное слово переносилось внутри контейнера flex?

Собственно вопрос в том, как сделать, чтобы длинное слово (заголовок) переносилось внутри контейнера flex

html:

<div class="flex_container">
  <h1>Loremipsumdolorsitametconsectetur</h1>
</div>
<div class="noflex_container">
  <h1>Loremipsumdolorsitametconsectetur</h1>
</div>

css:

.flex_container {
  background-color:yellow;
  display:flex;
  width:200px;
  height:200px;
}

.noflex_container {
  background-color:yellow;
  width:200px;
  height:200px;
}
h1 {
    overflow-wrap: break-word;
}