css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动

图拉呀

于 2023-08-04 18:17:12 发布

阅读量995

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/u010328533/article/details/132108745

版权

需求:正常情况下
在这里插入图片描述
宽度超出时:

实现:

<templete>

<div class="jieduanbox">
		<div v-for="(item, index) in stageList" :key="index" style="display: inline-block">
		.......
		</div>
		 <div class="rightBtn">
          <el-button
            icon="el-icon-plus"
          />
        </div>
<div>
</templete>


.jieduanbox {
  display: flex;
  align-items: center;
  overflow-x: auto; /* 当内容超出时显示横向滚动条 */
  overflow-y: hidden;
  }
  
  .rightBtn{
  flex-shrink: 0; /* 防止右侧内容缩小 */
  position: sticky;
  right: 0;
}