Html CSS-证明内容不影响弯曲项

因此，我正在进行一项小型技术挑战，并使用flexbox。我有

display:flex并在同一css属性中尝试使用
justify content
以
均匀地分配空间
。然而，这根本没有效果

我的CSS：

.relatedFlex 
{
  display: flex;
  background-color: #fff;
  justify-content: space-between;
}

我的HTML：

   <section class="relatedPost">
    <div class="wrapper">
        <h2>Related post:</h2>
        <div class="relatedFlex">
            <div class="relatedSectionOne">
                <img class="photoWidth" src="assets/image-2.jpg" alt="Looking Stoic">
                <div>
                    <p>MAR 9, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionTwo">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
            <div class="relatedSectionThree">
                <img class="photoWidth" src="assets/image-3.jpg" alt="Hands On Learning">
                <div>
                    <p>MAR 15, 2019</p>
                    <h3>Juno Tech Test</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quidem hic natus?</p>
                    <button>Read More</button>
                </div>
            </div>
        </div>
    </div>
</section>


相关职位：
2019年3月9日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
2019年3月15日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
2019年3月15日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
只需为相关部分指定宽度即可


.relatedFlex{
显示器：flex；
背景色：#fff；
证明内容：之间的空间；
}
.相关第一节{
宽度：15vw；
}

相关职位：
2019年3月9日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
2019年3月15日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
2019年3月15日

朱诺技术测试
我的同僚们都是精英。那是什么

阅读更多
这是正确答案。你的div太宽了，因为你没有设置宽度。增加宽度可以解决这个问题谢谢大家的评论！在这方面还是很新的，所以我在相关的部分单独添加了宽度，它解决了我的一些问题，但也导致了另一个问题。它将div中的所有内容（三个部分）向下移动，并创建一个巨大的伪顶部填充。所有3个项目向下移动600+像素。到目前为止还没有找到原因。快速编辑-它成功地均匀分布，但是调整单个相关部分的宽度并不能解决上述问题。我尝试过calc（33%的填充物）之类的东西，但是没有任何东西可以去除鬼魂空间，除非我使用一个非常小的宽度（比如10%）。