動的にリサイズし、容器

Question

の終わり（右/下）でのdivを置く私はこの設定にしてい

HTML：好む人のための

body, html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.cont{ 
 
    border:solid 1px red; 
 
    display:inline-block; 
 
} 
 

 
.left { 
 
    float: left; 
 
    width: 300px; 
 
    height: 30px; 
 
    border:solid 1px #000; 
 
} 
 

 
.big{ 
 
    width:600px; 
 
} 
 
    
 
.right { 
 
    border:solid 1px #000; 
 
    min-width:200px; 
 
    overflow: auto; 
 
    height: 30px; 
 
    padding-left:5px; 
 
    padding-right:10px; 
 
    padding-top:3px; 
 
    background:green 
 
}

<div class='cont'> 
 
    <div class='left'>1</div> 
 
    <div class='left'>2</div> 
 
    <div class='left big'>3</div> 
 
    <div class='left big'>4</div> 
 
    <div class='right'>Dynamic Div</div> 
 
</div>

Codepen linkその

divの右側に 'right' divを配置する必要があります。残ったスペースが> 200pxの場合はどうなりますか番号のついたdivを配置した後、入力テキストdivがそこに押し込まれます。私はそれを望んでいない。

「right」divは、最後の番号付きdivの右側にあり、右側の残りのスペースを埋める必要があります。残りのスペースが200ピクセル未満の場合、divは次の行に移動する必要があります。

ここでは問題にはならないが、番号が付けられた各divの幅はさまざまです。

jqueryなしでこれを達成できますか？

ありがとうございました。

編集：私は、これはフレキシボックス

、終らせることができるフレックスボックスを使用し

.cont{ 
 
    border:solid 1px red; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.right { 
 
    flex-grow:1; 
 
    border:solid 1px #000; 
 
    ..... 
 
}

Answer 1

を使用して成し遂げることができました。

jsfiddleでご覧ください。

スニペット（幅で更新：フィット・コンテンツ）：あなたはこれらのリンクからflexboxesについての詳細を学ぶことができ

body, html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.cont { 
 
    border: solid 1px red; 
 
    /*display: inline-block;*/ 
 
    display: flex; /* added */ 
 
    flex-wrap: wrap; /* added */ 
 
    
 
    width: -webkit-fit-content; /* chrome 22+, opera 15+, safari 6.1+ */ 
 
    width: -moz-fit-content; /* firefox 3+ */ 
 
    width: fit-content; /* default */ 
 
} 
 

 
.left { 
 
    border: solid 1px #000; 
 
    float: left; 
 
    height: 30px; 
 
    /*width: 300px;*/ 
 
    min-width: 300px; /* added */ 
 
    max-width: 300px; /* added */ 
 
    box-sizing: border-box; /* added */ 
 
} 
 

 
.big { 
 
    /*width: 600px;*/ 
 
    max-width: 600px; /* added */ 
 
    min-width: 600px; /* added */ 
 
} 
 

 
.right { 
 
    border: solid 1px #000; 
 
    min-width: 200px; 
 
    overflow: auto; 
 
    height: 30px; 
 
    padding-left: 5px; 
 
    padding-right: 10px; 
 
    padding-top: 3px; 
 
    background: green; 
 
    flex: 1; /* added */ 
 
}

<div class='cont'> 
 
    <div class='left'>1</div> 
 
    <div class='left'>2</div> 
 
    <div class='left big'>3</div> 
 
    <div class='left big'>4</div> 
 
    <div class='right'>Dynamic Div</div> 
 
</div>

：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://www.w3schools.com/css/css3_flexbox.asp