Доброе время суток. Есть простая верстака на flex-box
.flex-container {
display: flex;
width: 750px;
margin: 0 auto;
height: 300px;
color: #fff;
font-size: 2.6em;
flex-flow: column wrap;
position: relative;
}
.flex-item {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.one {
background: #508694;
margin-right: 10px;
flex-basis: 100%;
}
.two {
background: #BB844C;
margin-bottom: 10px;
flex: 1 1 0;
}
.three {
background: #929D79;
flex: 1 1 0;
}
<div class="flex-container">
<div class="flex-item one">Some block</div>
<div class="flex-item two">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="flex-item three">Some block</div>
</div>
Как сделать чтоб при респонсе текст внутри блока переносился когда достигает края родительского блока, а не когда упирается в край экрана?
Возможно не совсем корретно изначально описал задачу.
При адаптиве (респонсе) пока у блока с текстом есть свободное простанство все норм http://joxi.ru/n2YegBqIb6zxY2, а когда текст уже не помещается в блоке, вся верстка начинает выпадать из родителя http://joxi.ru/82QZBMxIwvxewA. Возможно тут вообще нужно другое решение и на чистом css это не реализовывается.