如何将View按钮对齐到flexbox底部？现有样式方案未生效

我尝试用position absolute、align-items等样式，想把页面中的View按钮对齐到filmbox容器的底部，但都没生效。当前使用的HTML与CSS代码如下：

原始代码 #

CSS #

.filmbox {
    overflow:hidden;
    border-color:rgb(0, 0, 0);
    background-color:rgb(36, 36, 36);
    width:180px;
    height:413px;
    margin-right:10px;
    display:inline-block;
}
.filminfo{
    position: relative;
    margin-top:-6px;
    overflow:hidden;
}
.view{
    display:block;
    position: absolute;
    bottom:0;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    margin-top:10px;    
    margin-bottom:4px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:2px;
    width:140px;
}

HTML #

<div class="filmbox">
    <img class="poster" src="{{x.poster.url}}">
    <div class="filminfo">
        <div class="info">
        <p class="rating">Ratings: {{ x.rating }}/5.0<img src="{% static 'image/rating.png' %}"><br>{{ x.title }}</p>
        </div>
        <div style="clear:both"></div>
        <div class="view">
        <a href="movie/{{x.id}}">View</a>
        </div>
        <div style="clear:both"></div>
    </div>
</div>

解决方案 #

问题核心是filmbox的布局方式以及filminfo未撑满容器剩余空间，修改后的代码如下：

修改后的CSS #

.filmbox {
    overflow:hidden;
    border-color:rgb(0, 0, 0);
    background-color:rgb(36, 36, 36);
    width:180px;
    height:413px;
    margin-right:10px;
    /* 改为flex垂直布局，让内部元素按垂直方向排列 */
    display: flex;
    flex-direction: column;
}
.filminfo{
    position: relative;
    margin-top:-6px;
    overflow:hidden;
    /* 让filminfo占满海报下方的所有剩余空间 */
    flex: 1;
}
.view{
    display:block;
    position: absolute;
    /* 对齐到filminfo底部，保留原有的4px间距 */
    bottom: 4px;
    /* 通过left和transform实现可靠水平居中 */
    left: 50%;
    transform: translateX(-50%);
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    width:140px;
    padding-bottom:2px;
    /* 移除不必要的margin，避免冲突 */
    margin: 0;
}

说明 #

1. 将filmbox设置为flex垂直布局，让海报和filminfo按垂直顺序分布。
2. 给filminfo添加flex:1，使其自动填充海报下方的剩余空间，确保高度撑满容器剩余部分。
3. 调整view的定位：用left:50%加transform: translateX(-50%)实现稳定水平居中，bottom:4px直接对齐到filminfo底部（即filmbox底部）。

内容的提问来源于stack exchange，提问作者Allayy