Макс

Вот такое решение
Решение

Это конечно костыль, но тут такое решение с минимальными доработками.

Насколько я понимаю проблема в том, что не хватает скролла для "4 элемента".
Это наглядно видно тут
Наглядно
Если убрать высоту у body, то не будет работать исходный код

body {
 height:2510px;
}

Вот

<div class='flex'>
<div class='right_intro'>1</div>
<div class='left_intro'>2</div>
  </div>

.flex {
align-items: stretch;
display: -webkit-flex;
display: flex; }

.right_intro {
width: 54%;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 400;
color: white;
padding-top: 40px;
padding-left: 15px;
position: relative;
background: blue;
}

.left_intro {
width: 45%;
background: red;
}

Вот есть статья под CSS
Habr
А точнее вот эта часть

background-image:  url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png");  
    background-position: top right 10px, bottom left, top left;
    background-repeat: no-repeat, repeat-x, repeat-x ;