父容器宽度溢出后子容器如何适配

1、需求背景

在原有的框架基础上优化组件样式，让页面元素左右滚动的时候按钮在视口最右侧一直展示，上下滚动跟随页面内容上下滚动。

2、原本的组件框架

有一个父容器弹性布局并且使用flex：1自动伸缩子容器的宽度，父容器有溢出的时候可以滚动展示，子容器撑开父容器，子容器不单独滚动，子容器跟随父容器整体上下左右滚动。

弹性布局flex:1具体讲解

<template>
  <div>
    <van-tab title="tab1">
   </van-tab>
   <van-tab title="tab2">
    <div class="parent">
      <div class="children1 ">
        对应展示了一下LABEL的内容
      </div>
      <van-list v-if="!loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="(item, index) in data" :key="index" class="content line">
          <div class="col">
              <span class="text"> lalalala </span>
              <span class="number code"> hahahaha </span>
          </div>
          <div class="col">
              <span class="text"> lalalala </span>
              <span class="number code"> hahahaha </span>
          </div>
          <div class="col">
              <span class="text"> lalalala </span>
              <span class="number code"> hahahaha </span>
          </div>
          <div class="col">
              <span class="text"> lalalala </span>
              <span class="number code"> hahahaha </span>
          </div>
          <div class="col">
              <span class="text"> lalalala </span>
              <span class="number code"> hahahaha </span>
          </div>
          <van-button v-if="item" plain class="btn">操作</van-button>
          <van-button v-else plain disabled class="btn">操作</van-button>
        </div>
      </van-list>
    </div>
  </van-tab>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const loading = ref(false);
const LABEL = [
  ['name0', 'test0'],
  ['name1', 'test1'],
  ['name2', 'test2'],
  ['name3', 'test3'],
  ['name4', 'test4'],
  ['name5', 'test5']
];
// 从接口获取数据
const onLoad = () => {
};
</script>
<style lang="scss">
.parent{
  border-radius: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 12px 16px;
  background: #fff;
  .content{
    padding-bottom: 15px;
    padding-top: 8px;
    position: relative;
    .col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 13px;
      height: 46px;
      background: #fff;
      text-align: right;
    }
    .btn{
      position: absolute;
      right: 20px;
      height: 28px;
      width: 80px;
      font-size: 14px;
      padding: 0;
    }
  }
}
</style>

3、修改的难点

期待的效果：不改变现有组件的搭建框架，让子容器内容下的占满空间，按钮脱离文档流展示在每行的视口最右侧。
现状：子容器的空间只有一视口宽度，获取不到溢出的父容器宽度。按钮已经脱离文档流，但是没有吸附在最右侧。

4、修改措施

按钮吸附在最右侧，定位采用sticky,并让元素浮动起来（没有浮动的话，就是固定粘在某一个地方了）。

.btn{
  position: sticky;
  float:right;//脱离文档流
  right: 20px;
  height: 28px;
  width: 80px;
  font-size: 14px;
  padding: 0;
}

子容器宽度和父容器宽度保持一致，给子容器的宽高使用fit-content，宽度和高度由内容撑开，这样父元素和子元素都是子元素的内容撑开的宽度和高度，线条的样式就能从左到右铺满了。

.content{
    padding-bottom: 15px;
    padding-top: 8px;
    position: relative;
    width: fit-content;//宽度自适应内容
    height: fit-content;//高度自适应内容
 }

最终，上下左右滚动的时候，线条铺满列表数据底边，按钮在视口最右侧固定展示，上下滑动的时候跟随列表数据上下滑动。