我对flexbox还是很陌生。我有一个固定宽度的容器div和滚动的溢出-x。 但是,向左溢出的子项的内容被隐藏,并且仅滚动向右溢出的内容。从小提琴中可以看出,第2行的节点1是隐藏的,即使向左滚动也不可见。
我尝试将宽度设为100%作为子元素。这是一个复制问题的jsfiddle:{{3}}
<div class="container">
<div class="row center-h">
<div class="node">1</div>
</div>
<div class="row center-h">
<div class="node">1</div>
<div class="node">2</div>
<div class="node">3</div>
<div class="node">4</div>
</div>
<div class="row">
<div class="node">1</div>
<div class="node">2</div>
<div class="node">3</div>
<div class="node">4</div>
<div class="node">5</div>
<div class="node">6</div>
<div class="node">7</div>
<div class="node">8</div>
<div class="node">9</div>
<div class="node">10</div>
<div class="node">11</div>
<div class="node">12</div>
<div class="node">13</div>
<div class="node">14</div>
</div>
</div>
.row{
display: flex;
}
.row.center-h{
justify-content: center;
}
/* .column{
display: flex;
flex-direction: column;
align-items: flex-end;
} */
.container{
max-width: 16em;
overflow-x: scroll;
margin-left: 10em;
}
.node{
padding: 1em 2em;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0px 2px 5px #efefef;
margin: 1em;
}
```[screenshot][1]
[1]: https://i.stack.imgur.com/RJnAb.png