html - flexbox 内容溢出

Question

我正在尝试制作一个页脚，我为三列设置了三个 div，并在 flex 和 flex div 上设置了容器显示，设置为 1 以成为相等的列，但是当我在其中放置一个段落时，它会出现在容器之外

.footer{
    background: #303036;
    color:#d3d3d3;
    height:400px;
    position: relative;
}

.footer .footer-content{
    display:flex;
    border:1px solid red;
    height:350px;
}

.footer .footer-content .footer-section{
    padding: 20px;
    flex:1;
    border:1px solid white;
}

        <div class="footer">
              <div class="footer-content">
                  <div class="footer-section about">
                  <h1 class="logo-text"><span >V</span>Tech</h1>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

                  </div>
                        <div class="footer-section links"></div>

                        <div class="footer-section contact-form"></div>


              </div>


        </div>

Answer 1

Just remove height

.footer{
    background: #303036;
    color:#d3d3d3;
    position: relative;
}

.footer .footer-content{
    display:flex;
    border:1px solid red;
}

.footer .footer-content .footer-section{
    padding: 20px;
    flex:1;
    border:1px solid white;
}

   <div class="footer">
              <div class="footer-content">
                  <div class="footer-section about">
                  <h1 class="logo-text"><span >V</span>Tech</h1>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

                  </div>
                        <div class="footer-section links"></div>

                        <div class="footer-section contact-form"></div>


              </div>


        </div>