Текст, покидающий контейнер

Question

У меня проблема. Я хочу, чтобы моя страница была отзывчивой, но каким-то образом, применяя гибкость и изменяя разрешение, чтобы уменьшить, текст из левого столбца 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 здесь