絶対的に配置されたアイテムに柔軟な幅があります

Question

カレンダーの日表示用のグリッドを作成しています。アイテムは開始時刻と終了時刻に従って垂直に配置され、サイズが決められています。アジェンダ項目が他と重複しない場合、その幅は列の全幅にわたっています。ただし、アイテムが重なっている場合は、アイテム間の幅が分割されます。以下の例画像：明らかに

Full-width items, no overlap

Overlapping items

が、これはすべてが一度にすべての会議の完全な知識とJavascriptを使用して計算することができます。しかし、これを処理するためのエレガントなCSSソリューションがあるのだろうかと疑問に思っています。ここでコードは垂直位置と高さだけを提供する必要がありますか？

私は各グリッドボックスが適切なカプセル化を維持しながら、それ自身の議題項目のデータを知る必要があるように自分のReactコードを整理したいと思っています。他のアイテムについてのデータの束（前処理済みかどうか）を渡す必要はありません。

Answer 1

これは、フレックスボックスの完璧な使用例のようです。それはReactでうまくいく。

ブートストラップV4はフレックスボックスで使用できます。 PostCSSを使用している場合は、もう一つの良い選択肢は失われたグリッドです。