VUE前端图表显示问题

Question

我使用VUE在前端显示了两个图，并将两个图显示在一行中。但如果页面显示比例有调整，两个图就跑到两行了，我希望是一直在同一行，如果出现显示不下的情况，就自动增加一个横向滚动条。该怎么修改一下代码呢？

当页面显示比例放大后，两个图就的位置就变成了这样：

我希望的是无论怎么缩放，位置始终是在一行里的，如下：

  我的代码如下：

<el-row>
            <el-col span="12" style="width: 800px; height:180px;margin-left:20px; position:relative;">
              <draw1
                v-if="drawflag"
                :draw-bar-data="drawScatterData1"
                :xAxis_min="this.xAxis_min2"
                :xAxis_max="this.xAxis_max2"
              />
            </el-col>
            <el-col span="12" style="width: 800px; height:180px;margin-left:20px; position:relative;">
              <draw4
                v-if="drawflag"
                :draw-bar-data="drawScatterData2"
                :xAxis_min="this.xAxis_min3"
                :xAxis_max="this.xAxis_max3"
              />
            </el-col>
          </el-row>

Answer 1

一个图800，两个图1600，你只要设置父元素宽度1600，超出直接overflow-x:scroll就可以了，这是最笨的办法，还有其他办法就是flex呗也行