親要素のdivの幅を２つの子要素の幅に合わせたい

実現したいこと

vue.jsのvue-seamless-scrollを使って左にシームレススクロールする機能を実装したいです。

発生している問題

vue-seamless-scrollは自動でdivが生成されシームレススクロールを実現していると思うのですが、
アイテムリストの幅が親要素の幅を超えてしまいはみ出た部分が折り返されて表示されなくなってしまいます。

該当のソースコード

html
1    <vue-seamless-scroll :data="ids" :class-option="classOption" class="seamless-warp">
2      <span>
3          <span class="flame" v-for="(id, index) in ids" v-bind:key="index" v-text="items[id].text"></span>
4      </span>
5    </vue-seamless-scroll>

js
1import vueSeamless from 'vue-seamless-scroll'
2export default {
3  props: ['ids', 'items'],
4  components: {
5    vueSeamless
6  },
7  data () {
8    return {
9      classOption: {
10        step: 0.5,
11        limitMoveNum: 5,
12        hoverStop: false,
13        direction: 2,
14        openTouch: false,
15      }
16    }
17  }

css
1.seamless-warp {
2  height: 120px;
3  width: 100%;
4  overflow: hidden;
5  padding: 0px 0px;
6}
7.seamless-warp > div {
8  /* width: 5000px; */
9  /* display: inline-block; */
10  /* float: left; */
11}
12.seamless-warp div div {
13  /* display: inline-block; */
14  /* float: left; */
15}

vue-seamless-scrollで生成されるHTMLは以下です

html
1<div class="seamless-warp"><!----> <!----> 
2    <div style="transform: translate(-301.5px, 0px); transition: all 0ms ease-in 0s; overflow: hidden; width: 705px;">
3        <div style="overflow: hidden;">
4            <span>
5                <span class="callFlame">0001</span>
6                <span class="callFlame">0002</span>
7                <span class="callFlame">0003</span>
8                <span class="callFlame">0004</span>
9                <span class="callFlame">0005</span>
10            </span>
11        </div> 
12        <div style="overflow: hidden;">
13            <span>
14                <span class="callFlame">0001</span>
15                <span class="callFlame">0002</span>
16                <span class="callFlame">0003</span>
17                <span class="callFlame">0004</span>
18                <span class="callFlame">0005</span>
19            </span>
20        </div>
21    </div>
22</div>

試したこと

上記cssで明示的に.seamless-warp > divに子要素の幅より大きいwidthを指定すると意図した挙動になりますが、
itemsは可変のためwidthを指定するのは避けたいです。

また.seamless-warp div divをinline-blockやfloat:leftで横並びにして合計の幅を親の幅に適用しようと試しましたが、
.seamless-warp > divの幅が勝手に決まってしまい、そもそも横並びになりませんでした。
この幅が何を見て決まっているのかが掴めず、解決方法が思いつきません。

何か良い方法があれば教えていただきたいです。
よろしくお願い致します。