有两个组件(A,B)位于具有显示的组件中:flex,A 始终是固定宽度,组件 B 应该填充其他所有内容。但是B也是display:flex,它有一个组件里面有很多方块,我需要这个组件(当没有足够的空间放置方块时)自己开始滚动而不是拉伸父级(水平出现滚动)
.root {
width: 100%;
display: flex;
}
.A {
min-width: 280px;
height: 100%;
background: green;
}
.B {
flex-grow: 1;
height: 100%;
background: yellow;
display: flex;
}
.wrapper {
display: flex;
overflow: auto;
}
.wrapper-item {
width: 32px;
height: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
</head>
<body>
<div class="root">
<div class="A">
1
</div>
<div class="B">
<div class="wrapper">
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
<div class="wrapper-item" style="background: red"></div>
<div class="wrapper-item" style="background: blue"></div>
</div>
</div>
</div>
</body>
</html>
在这里:https ://jsfiddle.net/pmz9o08s/8/但是滚动出现在页面上而不是包装上