不能在每个旁边显示两个div，并显示flex

Question

我对所有事情都有div .bigwrapper 。过滤器周围的过滤器（过滤器实际上是粉红色矩形） .blockblockwrapper围绕视频

问题是当我添加display：flex to .bigwrapper然后.indexfilters消失，我不知道在哪里和为什么。如果网站有帮助，你可以查看网站https://vitas.sk/OnlineTv/

我希望每个旁边都有.indexfilters和.blockblockwrapper。

<!-- 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

我将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: 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

您在代码中使用了额外不必要的css，并使用宽度上的%值进行正确布局。

我已根据需要更改了您的CSS。

Stack Snippet

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;