3つのDIVを持つFlexboxコンテナ

Question

私はお互いに隣り合う2つの要素を持つフレックスボックスを持っています。最初のDIVの静的な幅は350pxです。 2番目のDIVは動的です。幅はコンテンツに依存します。

私はコンテンツも動的である第3のDIVを作成します。しかし、このDIVは、第2のDIVの終わりに限定されるべきである。したがって、コンテンツは、2番目の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> 

私が知っている：この例では、第3のDIVは、フレックスボックスの外にあるが、私は解決策は、フレキシボックスに接続していると思います。

フィドル：https://jsfiddle.net/2ymx9oog/9/

任意のアイデア？

Answer 1

あなたはすでにあなたのjsfiddleでこれを持っている：

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

なぜrowに追加し、多分thirdためmargin: 10pxと私はどうなると思いません：

EDIT：

あなたができることの1つは、dynamicからflex: 1を削除し、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%; 
} 

あなたは、このオプションを使用して行けばthirdためheightを指定する必要があります。

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

私はこれについてあなたの意見を知ってみましょう。ありがとう！