我有这样的布局：
.foo {
display: flex;
flex-wrap: wrap;
}
.bar {
padding: 1rem 6rem;
text-align: center;
background: #A0E7E5;
}
.active {
background: #B4F8C8;
order: 99;
width: 100%;
}<div class="foo">
<div class="bar">1</div>
<div class="bar">2</div>
<div class="bar active">3</div>
<div class="bar">4</div>
<div class="bar">5</div>
</div>有没有一种方法可以防止蓝色div的包装，而是显示第一行的滚动条(最好不修改布局(？基本上，任何一项(.bar(都可以标记为.active，我想在末尾的单独一行中显示活动项。
您可以使用CSS网格来实现类似的效果。使foo成为一个有2行的网格，并给它一些宽度。然后将overflow属性添加到其中以创建滚动条。默认情况下，将所有的bardiv放在第一行，将所有.bar.active放在第二行。
.foo {
display: flex;
flex-wrap: wrap;
}
.bar {
padding: 1rem 6rem;
text-align: center;
background: #A0E7E5;
}
.foo {
width: 500px;
overflow-x: auto;
display: grid;
grid-template-rows: 1fr 1fr;
}
.bar {
grid-row: 1;
}
.active {
grid-row: 2;
background: #B4F8C8;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="foo">
<div class="bar">1</div>
<div class="bar">2</div>
<div class="bar ">3</div>
<div class="bar">4</div>
<div class="bar active">5</div>
</div>
</body>
</html>.bar {
padding: 1rem 6rem;
text-align: center;
background: #a0e7e5;
flex: auto;
}
您可以将flex:auto添加到bar类中，这在一定程度上解决了问题，并且不需要滚动条。