overflow: hidden; 如何隐藏上面部分？

Question

如图，一般使用overflow: hidden; 都是从下面截取隐藏
我现在需要隐藏上面部分，而下面保留
请问，这该怎么做？

Answer 1

设置position: absolute;bottom: 0;

.parent {
    width: 40px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
.child{
    position: absolute;
    bottom: 0;
}

<div class="parent">
    <div class="child">
        1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z
    </div>
</div>

Answer 2

通过CSS恐怕是不行的，文档流默认的就是从上到下，从左到右。如果强行更改文档流，可能别的地方布局就乱了。
我能想到的思路就是你把想要隐藏的部分的数据给截取掉，也就是说渲染都不渲染。
比如说JS得到的数据是

[
    {
        id: 10,
        price: 1233
    },
    {
        id: 9,
        price: 11.66
    }
]

然后想隐藏10，保留9，那就做arr.shift()什么的类似操作，把id为10的对象删掉，再渲染到页面上去。