ブック内のページのような表のセルが重複しています

Question

私は、ユーザーが好きなだけ多くの書式を記入して追加できる一連の書式を作成しようとしています。これらのフォームは高さが異なります（重要です）。最小限に抑えることができます。今私はオーバーフローオートで固定位置のdivで囲まれたテーブルにそれらを持っています。彼らがテーブルの中にいる理由は、高さにかかわらず、ページの最下部に貼り付けることができるからです。私が望むのは、表のセルがブックのようなページのように動作することです。新しいフォームが作成されるたびに、スペースがなくなるまで、前のシートの隣に座ってください。ページの幅がいっぱいになると、それらを均等に配置するのに必要なだけオーバーラップを開始します。また、フォームがクリックされたときに前面に表示されます。以下は、私が今までに持っていたものの原型図と一例です。

これは私の頭の中でぎこちないので、混乱しているものが見つかった場合はお尋ねください。

質問：テーブルセルが本のようなページのように動作するようにしたいのですが、スペースがなくなるまで、作成されたすべての新しいフォームを前のシートの隣に置いて欲しいです。ページの幅がいっぱいになると、それらを均等に配置するのに必要なだけオーバーラップを開始します。また、フォームがクリックされたときに前面に表示されます。以下は、私が今までに持っていたものの原型図と一例です。これはどうすればいいですか？

Pages in a book

$('#AddForm').click(function(){ 
 
    var Target = $('#Fixed').find('tr'); 
 
    var height = Math.random() * (100 - 50) + 50; 
 
    var HEX = '3456789ABCD'; 
 
    var Color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
     Color += HEX[Math.floor(Math.random() * 11)]; 
 
    } 
 
    var Form = $("<div>Form</div>").css("background", Color).css('height', height+"px"); 
 
    var Cell = $("<td class='Form' valign='bottom'></td>") 
 
    Cell.append(Form) 
 
    Target.append(Cell) 
 
});

#Fixed{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
} 
 
.FullWidth{ 
 
    width: 100% 
 
} 
 
.Form div{ 
 
    width: 200px; 
 
    white-space:nowrap; 
 
} 
 
#AddForm{ 
 
    position: absolute; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='AddForm'>Add Form</button> 
 
<div id='Fixed'> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class='FullWidth'></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

私はフレキシボックスで、この作品を作りました。ここでは、CSSだ、残りはフィドルである：

#fixed{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    display: flex; 
    flex-flow: row nowrap; 
    align-self: flex-end; 
    align-items: flex-end; 
} 

.form{ 
    width: 200px; 
    white-space:nowrap; 
    display: flex; 
    flex-flow: column wrap; 
    opacity: 0.8; 
} 

.form + .form{margin: 0 0 0 -20px;} 

#addForm{ 
    position: absolute; 
    z-index: 999; 
} 

https://jsfiddle.net/7np8pm53/1/