css 控制横向布局，超出隐藏，滚动

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <style>
		li{
			list-style: none;
		}
		.box1{
			 400px;
			height: 100px;
			overflow-y: hidden;
			overflow-x: scroll;
			/* position: relative; */
		}
	   .box2{
			display: flex;
			/* position: absolute; */
		 }
		 .box2 li{
			  50px;
			 height: 50px;
			 flex-shrink: 0;
			 line-height: 50px;
			 background: red;
			 margin: 15px;
			 text-align: center;
			 color: #fff;
		 }
  </style>
</head>
  <body>
	<div class="box1">
		<ul class="box2">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</div>  
  </body>
</html>

　　代码中，第一种可以使用 position: absolute;给box2，其父元素使用相对定位，使得box2的子元素可以横向滚动，改变display:flex布局的自适应；
　　
　　第二种是使用 flex-shrink: 0; 让其display:flex；不在收缩宽度；

作者：freddyhuang
出处：https://www.cnblogs.com/freddyhuang
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。