时间戳

首页 > 解决方案 > 扩展 flexbox 容器不按下下面的 div

html - 扩展 flexbox 容器不按下下面的 div

问题描述

我有一些元素将包含一个固定大小的图像和一些可变长度的文本，当文本大于文本容器高度时，我注意到了一个令人讨厌的行为，其中 div 元素增长但不下推显示在下面的元素（正文具有带方向列的 flex 显示）所以这将是更可取的结果，对吗？

这就是我所说的：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 FriendOne 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 upOne 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 FriendOne 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 upOne 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>

标签： htmlcssflexbox

解决方案

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

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

然后，三个弹性盒子将在中间垂直对齐，但如果你想让它们顶部对齐，你必须使用 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;
 }

推荐阅读