Как сделать так, чтобы текст не вылезал за блок при масштабировании страницы?
.content p {
}
.content {
flex: 1;
display: grid;
grid-template-columns: 715px;
grid-template-rows: 1fr;
padding: 1.5em;
background: url(pattern-bg.png);
box-shadow: 1px 1px 4px #000;
}
.mini-content-bg {
padding: .3em .6em;
background: #0C306D;
border-radius: 2em;
}
.content > div + div {
margin-top: 1em;
}
.mini-content {
height: 150px;
padding: 1em;
display: grid;
grid-gap: 1em;
background: linear-gradient(to top right, #436B10, #6FB119, #436B10, #436B10, #6FB119, #436B10, #436B10, #6FB119, #436B10);
border-radius: 2em;
}
.mini-content p {
margin: 0;
}
/* -content-1- */
.mini-content-1 {
grid-template-areas: "mini-img mini-h3 mini-h3 mini-h3 ."
"mini-img mini-txt mini-txt mini-txt mini-txt2"
"mini-img . . mini-a .";
}
.mini-content-1 .mini-img {
grid-area: mini-img;
}
.mini-content-1 h3 {
grid-area: mini-h3;
}
.mini-content-1 .mini-txt {
grid-area: mini-txt;
}
.mini-content-1 a {
grid-area: mini-a;
}
.mini-content-1 .mini-txt2 {
grid-area: mini-txt2;
}
<div class="content-box">
<div class="content">
<div class="mini-content-bg">
<div class="mini-content-1 mini-content">
<p class="mini-img"><a href="#"><img src="http://www.mgtk.kz/_nw/1/44613246.jpg" width="170" height="125"></a></p>
<h3><a href="#">Гранты по специальностям</a></h3>
<p class="mini-txt">Государственный образовательный заказ на подготовку специалистов с техническим и профессиональным, послесредним образованием на 2019-2020 учебный год...</p>
<a href="#">ПОДРОБНО</a>
<p class="mini-txt2">03.07.19, 11:10<br>
Просмотров: 355</p>
</div>
</div>
</div>
</div>