Flexbox Container mit drei DIVs

Question

Ich habe eine Flexbox mit zwei Elementen, die nebeneinander liegen sollten. Der erste DIV hat eine statische Breite von 350px. Der zweite DIV ist dynamisch. Die Breite hängt vom Inhalt ab.

Jetzt erstelle ich einen dritten DIV, dessen Inhalt auch dynamisch ist. Dieser DIV sollte jedoch auf das Ende des zweiten DIV beschränkt sein. Der Inhalt sollte also auf die Breite umbrechen, in der der zweite DIV endet.

.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> 

Ich weiß: In diesem Beispiel wird die dritte DIV ist aus dem Flexbox, aber ich denke, die Lösung des Flexbox verbindet.

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

Irgendwelche Ideen?

Answer 1

Sie haben dies bereits in Ihrem jsfiddle:

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

Warum fügen Sie es nicht zu row und vielleicht ein margin: 10px für third und ich denke, das tun würde:

EDIT:

Eine Sache, die Sie tun können, ist das Entfernen der flex: 1 von dynamic und wickeln Sie den Inhalt der third in einen absoluten Container relativ zu ihm:

.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%; 
} 

Sie die height für third, wenn Sie gehen mit dieser Option angeben.

.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>

mich auf dieses Feedback wissen lassen. Vielen Dank!