无法使用display flex在每个分区旁边创建两个div

Question

I have div .bigwrapper around everything .indexfilters around filters (filters are actually pink rectangle) .blockblockwrapper around videos

problem is that when i add display:flex to .bigwrapper then .indexfilters disappear and i dont know where and why. U can take a look at website if it helps https://vitas.sk/OnlineTv/

I want to have .indexfilters and .blockblockwrapper next to each one.

<!-- BIG WRAPPER -->
    <div class="bigwrapper">


    <!-- BEGIN - FILTERS -->
    <div class="indexfilters">
    <div class="border">

    </div>
    </div>
    <!-- END - FILTERS -->

    <!-- BEGIN - Videos -->

    <!-- 1 -->

    <div class="blockblockwrapper">
    <div class="blockwrapper">
    <div class="videoblock">
    <div class="insideblock">
    <iframe src="https://player.vimeo.com/video/251979190?title=0&byline=0&portrait=0" width="240" height="135" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a class="videoheading">Vegán bez čapice - 1</a>
    <a class="videotext">Séria:2</a><br>   
    <a class="videotext">630 000 000 videní</a><br>
    <a class="videotext">Pred 3 dňami</a><br>
    </div>



    //JUST VIDEOS ARE HERE - REMOVED FOR BETTER READING

     <div class="insideblock">
    <iframe src="https://player.vimeo.com/video/251979190?title=0&byline=0&portrait=0" width="240" height="135" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <a class="videoheading">Vegán bez čapice - 1</a>
    <a class="videotext">Séria:2</a><br>   
    <a class="videotext">630 000 000 videní</a><br>
    <a class="videotext">Pred 3 dňami</a><br>
    </div>
    </div>
    </div>
    </div>
    </div>

    <!-- END - Videos -->

CSS

/* VIDEOS */
.videoblock {
    width: 100%;
    height: 230px;
    display:flex;
    justify-content: space-around;
}

.insideblock {
   width: 240px;
}

.videoheading {
    display: block;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.videotext {
    color: grey;
    font-size: 13px;
}

.blockwrapper {
    display: flex;
    flex-direction: column;
    width: 60%;
    float: right;
    margin: 3% 5% 0% 0%;
}

/* Filters */

.border {
    width: 10%;
    height: 500px;
    background-color: pink;
}

.bigwrapper {
    width: 100%;
}

Answer 1

I changed my CSS to

/* VIDEOS */
.videoblock {
    width: 100%;
    height: 230px;
    display:flex;
    justify-content: space-around;
}

.insideblock {
   width: 240px;
}

.videoheading {
    display: block;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.videotext {
    color: grey;
    font-size: 13px;
}

.blockwrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: bisque;
}

.blockblockwrapper{
    background-color: green;
    margin: 3% 5% 0% 0%;
    width: 60%;
    float: right;
}

/* Filters */

.border {
    width: 100%;
    height: 500px;
    background-color: pink;
}
.indexfilters {
    float: left;
    width:  30%;
}

.bigwrapper {
    width: 100%;

}

Answer 2

You have used extra unnecessary css in your code and also use % values on width for proper layout.

I have changed your css where required.

Stack Snippet

 .indexfilters { width: 10%; height: 500px; background-color: pink; } .bigwrapper { width: 100%; display: flex; flex-wrap: wrap; } .blockblockwrapper { width: 90%; } .blockwrapper { } .videoblock { width: 100%; height: 230px; display: flex; flex-wrap: wrap; } .insideblock { width: 50%; } 

 <div class="bigwrapper"> <div class="indexfilters"> <div class="border"></div> </div> <div class="blockblockwrapper"> <div class="blockwrapper"> <div class="videoblock"> <div class="insideblock"> <iframe src="https://player.vimeo.com/video/251979190?title=0&byline=0&portrait=0" width="100%" height="135" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <a class="videoheading">Vegán bez čapice - 1</a> <a class="videotext">Séria:2</a><br> <a class="videotext">630 000 000 videní</a><br> <a class="videotext">Pred 3 dňami</a><br> </div> <div class="insideblock"> <iframe src="https://player.vimeo.com/video/251979190?title=0&byline=0&portrait=0" width="100%" height="135" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <a class="videoheading">Vegán bez čapice - 1</a> <a class="videotext">Séria:2</a><br> <a class="videotext">630 000 000 videní</a><br> <a class="videotext">Pred 3 dňami</a><br> </div> </div> </div> </div> </div> <!-- END - Videos -->