我想要一个集装箱班,让儿童留在最底层。
我没有把我的集装箱溢出母子箱外。
如果儿童占据比我想要的垂直滚动酒吧更多的空间,那么如果我想要的话,我就可以看到所有儿童。
容易 我这样界定了包装物:
.wrap-container {
display: flex;
flex-wrap: wrap;
align-content: center; // vertically
align-items: flex-start; // horizontally
//justify-content: space-between; /* Space items evenly along the main axis */
padding: 15px;
gap: 15px;
margin: 0px;
border: solid blue 1px;
// height: calc(100% - 30px);
// width: calc(100% - 30px);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
overflow: auto;
}
它正确地安排了这些人员,但它没有处理应当处理的超支问题。 我永远不会看到儿童第一行的顶峰。
澄清我知道的显示:允许flex在父母之外溢出。
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
30px is to account for the parent s padding. Which by the way seems like a bug as well - you would think that specifying max-height:100% should do it, but no you need to know how the parent is defined which seems wrong.
But in any case even if I arrange .wrap-container to not spill outside of its parent, it still does not handle the children correctly. Please see what I mean here: https://stackblitz.com/edit/stackblitz-starters-gwqxpg?file=src%2Fapp%2Fapp.component.scss
wrap母的定义如下:
.parent {
display: block;
width: 500px;
height: 200px;
border: solid red 1px;
padding: 15px;
gap: 15px;
margin: 70px;
}
and of
.child {
border: 1px solid transparent;
border-image-slice: 1;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
padding: 5px;
width: 150px;
height: 100px;
}
它然后看着:
甚至可以看看看看“工作一”或“工作二”