html - 扩展 flexbox 容器而不是将 div 向下推到下面

Question

我有一些元素将包含一个固定大小的图像和下面的一些可变长度的文本，当文本大于 div 元素增长的文本容器高度但不会下推显示的元素时，我注意到一种令人讨厌的行为下面( body 有带方向栏的柔性显示器)这样会是更好的结果吧？

这就是我所说的:https://imgur.com/a/MjwOxXX

请注意上部如何通过重叠而不是整个容器增长并向下推下部来占用下部的空间。

这是我的代码:

body{display:flex; flex-direction:column; height:auto; font-family:Roboto Slab; position:relative; scroll-bahaviour:smooth;}

*{box-sizing:border-box; margin:0; padding:0;} 


a{text-decoration:none;}

.squared_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}

.squared_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}

.squared_contents_container{width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}

.squared_content_container{width:32%; height:auto; display:flex; flex-direction:column; margin:10px 0px;}

.squared_content_image{width:100%; height:260px; outline:1px solid rgba(0, 0, 0, 0.3); background-repeat:no-repeat; background-size:cover;}

.squared_content_texts_container{width:100%; height:145px; display:flex; flex-direction:column; padding:10px; position:relative;}

.squared_content_texts_title{ width:100%; font-weight:500; font-size:17px; color:var(--main_color); margin-bottom:10px;}

.squared_content_texts_description{width:100%; height:auto; font-weight:500; oveflow:hidden;  font-size:14px; color:rgba(0, 0, 0, 0.9);  margin-bottom:10px;}

.squared_content_texts_link{width:100%; font-size:14px; color:var(--main_color); font-weight:400; text-align:right; marin-top:auto;}


.menu_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}

.menu_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}

.menu_contents_container{width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;}

.menu_content_image_container{width:32%; height:280px; box-shadow:3px 3px 3px rgba(0,0,0,0.1); background-size:cover; position:relative; }

.menu_content_texts_container{width:100%; height:auto; position:absolute; bottom:0px; left:0px; background-color:rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:10px;}

.menu_content_texts_title{font-size:18px; font-weight:400; color:var(--main_color);}

.menu_content_texts_description{font-size:15px; font-weight:400; color:white;}

<div class="squared_maincontainer push" style="">
    <span class="squared_title" style="">Eventos</span>
    <div class="squared_contents_container" style="">
        <a href="" class="squared_content_container" style="">
            <div class="squared_content_image" style="background-image:url('img/dogs22.jpg');"></div>
            <div class="squared_content_texts_container" style=" ">
                <span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
                <span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
                <span class="squared_content_texts_link" style="">Read More</span>
            </div>
        </a>
        <a href="" class="squared_content_container" style="">
            <div class="squared_content_image" style="background-image:url('img/dogs12.jpg');"></div>
            <div class="squared_content_texts_container" style=" ">
                <span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
                <span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
                <span class="squared_content_texts_link" style="">Read More</span>
            </div>
        </a>
        <a href="" class="squared_content_container" style="">
            <div class="squared_content_image" style="background-image:url('img/dogs2.jpg');"></div>
            <div class="squared_content_texts_container" style="">
                <span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
                <span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
                <span class="squared_content_texts_link" style="">Read More</span>
            </div>
        </a>
    </div>
</div>
<div class="menu_maincontainer push" style="">
    <a class="menu_title" href="" style="">Título de sección</a>
    <div class="menu_contents_container" style="">
        <div class="menu_content_image_container" style="background-image:url('img/dogs32.jpg');">
            <div class="menu_content_texts_container" style="">
                <a class="menu_content_texts_title" href="" style="">Titulo</a>
                <a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
            </div>
        </div>
        <div class="menu_content_image_container" style="background-image:url('img/dogs30.jpg');">
            <div class="menu_content_texts_container" style="">
                <a class="menu_content_texts_title" href="" style="">Titulo</a>
                <a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
            </div>
        </div>
        <div class="menu_content_image_container" style="background-image:url('img/dogs22.jpg');">
            <div class="menu_content_texts_container" style="">
                <a class="menu_content_texts_title" href="" style="">Titulo</a>
                <a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
            </div>
        </div>
    </div>
</div>

Answer 1

我查看了您的代码，我注意到 .squared_content_texts_container 类将描述文本高度修复为 145 像素。这就是为什么当第一个盒子的高度增长时它没有调整父 div 的高度。

尝试从 .squared_content_texts_container 类中删除 145px 高度，或者将 min-height 设置为 145px。

然后，三个 flex 盒子会在中间垂直对齐，但如果你想让它们顶部对齐，你必须使用 align-self: flex-start; .squared_content_container 类的样式。

请查看带有结果的 jsFiddle。 https://jsfiddle.net/katerynas/d3n5ksps/

 .squared_content_texts_container{
     width:100%;
     min-height:145px;
     display:flex;
     flex-direction:column;
     padding:10px;
     position:relative;
 }
 .squared_content_container{
     width:32%;
     height:auto;
     display:flex;
     flex-direction:column;
     margin:10px 0px;
     align-self: flex-start;
 }