new responsiveで、floatingを上手く設定できない

bubble
1

以下動画のように、左右にfloating groupを設置して固定したいと考えています。
https://gyazo.com/b960680782154540ccec3cd8fa34acdb

しかし、現状は画面幅が変わると以下のようにfloatingの部分だけレイアウトがおかしくなってしまいます。
https://gyazo.com/0e8140bc91006d8f3a2393aea194232b

以下のように、画面幅が変わっても真ん中のgroupは一定以上の幅に広がらずにしたいのです。しかし、floating groupだけは上手く設定できません。
https://gyazo.com/827a4668f1c5eeb912eb3f96b358a9a3

どのようにすればfloatingをうまく配置できるのでしょうか。

2

Floatingの幅の分だけ、マージンを設定するのはどうでしょうか？

3

マージンで固定するだけだと、画面の幅が広がった時にそれに応じて広がってしまうんですよね

かといってグループの中にフローティンググループを入れて、グループの幅を固定することもできませんし…

やはりこの場合は旧レスポンシブじゃないとできないのでしょうか…

4

では、Floatingの背後に、それと同じ幅のGroup要素を固定幅で配置するといけると思います。
floatingは文字どおり浮いているので、背後にエレメントが回り込んでしまうために今の問題が起きているはずです。

なので、そこには入れないように別にものを配置するイメージですね。