Fiido Firdauz Fiido Firdauz - 6 months ago 18
jQuery Question

Max-height reached and the div continuesly goes to right like responsive overflow-x

Is it possible to achieve this layout, Can show me how to that?

enter image description here

CSS

.broad-structure{
display: inline-block;
width: 450px;
border-left: 1px solid #eee;
white-space: normal;
}

.broad-content{
padding: 30px;
}

.structure .veno{
float: left;
margin-right:20px;
width: 80px;
height: 80px;
border-radius: 50%;
}

.desc-pro{
padding: 15px 0;
}

.story{
white-space: normal;
text-align: justify;
}

.nodes{
background-color: rgba(221, 213, 213, 0.11);
height: 100%;
}

.grayz{
background-color: rgba(221, 213, 213, 0.11);
}

.fishy{
background-color: rgba(221, 213, 213, 0.11);
height: 100%;
}

.chandelier{
padding: 30px;
}

.tagline img{
width: 100%;
height: 350px;
}

.cont-struct{
height: 850px;
overflow: hidden;
}

.viso{
display: inline-block;
width: 420px;
border-left: 1px solid #eee;
white-space: normal;
border: 1px solid #eee;
}

.construct{
padding: 30px;
}

.construct h3{
color: rgba(104, 109, 132, 0.58);
font-weight: 700;
margin-top: 20px;
}

.btn-nero {
width: 88%;
}

.setia{
width: 100%;
height: 200px;
cursor: pointer;
}


Here is the DEMO

Answer

It is possible to achieve this layout..

add these styles to your wrapper element display: flex ; flex-direction:column; flex-wrap:wrap; and it give it the height and width that you want for the wrapper.

Then in the child put height:200px( or whatever ) and then when the wrapper cannot hold any more elements it will push them onto the next column..

<style>

        .broad-structure {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 600px;
            border: 1px solid red;
        }
         .broad-content{
            height: 150px;
        }

    </style>