html - 逃离容器的文本

Question

我有一个问题。我希望我的页面能够响应，但不知何故，当应用 flex 并将分辨率更改为较低时，来自左列 div 的文本从容器中转义。相反，它应该插入父 div 高度。这是发生了什么:

<div class="container" id="ct-about-div">
        <h2 id="ct-about-text1">Know about us</h2>
        <div id="ct-rect"></div>
        <span id="ct-about-text2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim</span>
<div id="diagonal">
  <div class="col-md-offset-2 col-md-4" id="ct-about-col-left">
    <h3>We are the best</h3>
    <p>Consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
    <p>Valutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
        suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
        iriure dolor in hendrreit in volputate velit esse molestie consequat, vel illum
        dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
        dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
        te feugait nulla fascilisi. Nam libre tempor cum</p>
    <div>
      <span>Read more</span>
    </div>
  </div>
<div class="col-md-6" id="ct-about-col-right"></div>
</div>
</div>

CSS:

#ct-about-div {
  height: 100%;
  width:100%;
  border: 1px solid blue;
  text-align: center;
    #ct-about-text1{
        font-size: 40px;
    font-family: "Raleway";
    color: grey;
    font-weight: bold;
    text-transform: uppercase;
    }
  #ct-rect{
    background: grey;
    height: 9px;
    width: 90px;
    margin: auto;
  }
  #ct-about-text2{   
    font-size: 18px;
    font-family: "Raleway";
    color: rgb(33, 33, 33);
    text-align: center;
  }
}
#diagonal{
  display: flex;
  text-align: left;
  width: 100%;
  height: 100%;
  background: rgb(245, 245, 245);
  border: 3px solid blue;
  #ct-about-col-left{
    width: 100%;
    height: 500px;
    border: 1px solid red;
    h3{
      font-size: 24px;
      font-family: "Raleway";
      color: black;
      text-transform: uppercase;
      line-height: 1.25;
    }
    p{
      font-size: 16px;
      font-family: "Raleway";
      color: rgb(0, 0, 0);
      line-height: 1.875;
    }
    div{
      border: 3px solid;
      span{

      }
    }
  }
  #ct-about-col-right{
    height: 500px;
    width: 100%;
    border: 2px solid;
    background-image: url(images/content/about/right-col-image2.png);
    background-repeat: no-repeat;
    background-size: cover;
  }  
}

Answer 1

只需删除任何高度声明，盒子就会自动调整高度

具体来说:

#ct-about-col-left{
 width: 100%;
height: 500px;

去掉这里的500px声明