vue怎么让子元素横向内容过多，产生滚动条

置顶浮生666

已于 2022-03-14 09:55:04 修改

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： vue html css3 flex css

于 2020-06-09 21:59:17 首次发布

本文链接：https://blog.csdn.net/qq_43069664/article/details/106651902

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

步骤：完整代码如下


<template>
   <div>
	   <div class="box">
		   <div v-for="(item,i) in 4" :key="item"></div>
	   </div>
   </div>
</template>
<style scoped lang="scss">
	.box{
		width:375px;
		border: 1px solid red;
		height: 200px;
		display: flex;
		display: -webkit-box;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: initial;
		>div{
			width: 200px;
			height: 100%;
		}
		>:nth-child(1){
			background:blue;
		}
		>:nth-child(2){
			background:pink;
		}
		>:nth-child(3){
			background:green;
		}
		>:nth-child(4){
			background:#007AFF;
		}
	}
</style>