溢出时从左到右隐藏项目

Question

我有一个带子级的div，如果没有足够的空间，我想隐藏项目，但从flex start而不是flex end 隐藏

.parent {
height: 50px;
width: 500px;
display: flex;
flex-flow: row wrap;
overflow: hidden;
}
.child {
height: 100%;
width: 200px;
background-color: red;
}

<div class="parent">
<div class="child">1</div>
<div class="child">2 </div>
<div class="child">3 </div>
</div>

在这里，我想看到容器2和3，而不是1和2

Answer 1

我希望我能正确理解你的问题。

.parent {
height: 50px;
width: 500px;
display: flex;
flex-direction: row;
justify-content: flex-end;
overflow: hidden;
background-color: lightgrey;
position: relative;
padding: 10px;
}
.child{
height: 30px;
min-width: 50px;
background-color: darkgrey;
color: white;
margin-left: 10px;
font-size: 24px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
</div>