Контейнер Flexbox с тремя DIVs

Question

У меня есть flexbox с двумя элементами, которые должны быть рядом друг с другом. Первый DIV имеет статическую ширину 350 пикселей. Второй DIV является динамическим. Ширина зависит от содержимого.

Теперь я создаю третий DIV, содержимое которого также является динамическим. Но этот DIV должен быть ограничен до конца второго DIV. Таким образом, содержимое должно быть округлено до ширины, где заканчивается второй DIV.

.out { 
    border: 1px solid red; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
.row { 
    display: inline-flex; 
    flex-direction: row; 
    padding: 10px; 
    border: 1px solid yellow; 
} 
.infos { 
    border: 1px solid green; 
    flex-basis: 350px; 
} 
.dynamic { 
    border: 1px solid blue; 
    flex: 1 1; 
} 
.third { 
    border: 1px solid pink; 
} 

<div class="out"> 
    <div class="row"> 
    <div class="infos"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a 
    </div> 
    <div class="dynamic"> 
     Lorem ipsum 
    </div> 
    </div> 
    <div class="third"> 
    accusam et justo duo dolores et earebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a 
    </div> 
</div> 

Я знаю: В этом примере третий DIV выходит из Flexbox, но я думаю, что решение подключается к Flexbox.

Fiddle: https://jsfiddle.net/2ymx9oog/9/

Любые идеи?

Answer 1

У вас уже есть это в вашем jsfiddle:

.outRow { 
    display: inline-flex; 
    flex-direction: column; 
} 

Почему бы не добавить его в row и, возможно, margin: 10px для third, и я думаю, что будет делать:

EDIT:

Одна вещь, которую вы можете сделать, - удалить flex: 1 от dynamic и обернуть содержимое third в абсолютный контейнер по отношению к нему:

.third { 
    border: 1px solid pink; 
    margin: 10px; 
    position:relative; 
    height: 100px; 
    overflow-y: auto; 
} 
.third div{ 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
} 

Вы должны указать height для third, если вы идете с этой опцией.

.out { 
 
    border: 1px solid red; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.outRow { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    padding: 10px; 
 
    border: 1px solid yellow; 
 
} 
 
.infos { 
 
    border: 1px solid green; 
 
    width: 350px; 
 
} 
 
.dynamic { 
 
    border: 1px solid blue; 
 
} 
 
.third { 
 
    border: 1px solid pink; 
 
    margin: 10px; 
 
    position:relative; 
 
    height: 100px; 
 
    overflow-y: auto; 
 
} 
 
.third div{ 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="out outRow"> 
 
    <div class="row"> 
 
    <div class="infos"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a 
 
    </div> 
 
    <div class="dynamic"> 
 
    Lorem ipsum 
 
    </div> 
 
    </div> 
 
    
 
    <div class="third"> 
 
     <div> 
 
    Lorem ipsum dolor sit amet, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed 
 
     </div> 
 
    </div> 
 

 
</div>

Позвольте мне знать ваше мнение по этому вопросу. Благодаря!