Text escaping the container - html

Question

I have a problem. I want my page to be responsive but somehow when applying flex and changing resolution to lower, text from left column div is escaping from container. Instead it should push the parent div height. This is what happens:
<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

Simply remove any height declarations and the boxes will auto scale in height
Specifically:
#ct-about-col-left{
width: 100%;
height: 500px;
Remove the 500px declaration here