"overflow: hidden" let the text go over <article> - html

Question

When I try to use overflow: hidden;, the result isn't that I expect.
The article has the good size on big screens, but on small screens, the text is too big so it's over the article..
.article {
padding: 35px;
width: 100%;
max-height: 200px;
border-radius: 10px;
box-shadow: 0 0 0.50rem black;
}
.article_img {
float: left;
height: 200px;
width: 200px;
padding-right: 25px;
object-fit: contain;
}
<section>
<article class="article">
<img class="article_img" src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
<h1>Test</h1>
<p style="overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet leo eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id velit pharetra, vitae vehicula augue convallis. In nec euismod
felis. Nunc eget ornare ligula. Praesent finibus ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim, quis facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin
vitae. Sed dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque sed, mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec eleifend ultricies
justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula diam feugiat felis, eget consectetur nibh est et dolor.</p>
</article>
</section>
Result:
Expected (approx.):

Answer 1

As of now, you can use the proprietary -webkit-line-clamp and define the number of lines you want:
html { box-sizing: border-box; }
*, *::before, *::after, *::marker { box-sizing: inherit; }
.line-clamp-5 {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article {
padding: 35px;
width: 100%;
max-height: 200px;
border-radius: 10px;
box-shadow: 0 0 0.50rem black;
}
.article_img {
float: left;
height: 200px;
width: 200px;
padding-right: 25px;
object-fit: contain;
}
<section>
<article class="article">
<img class="article_img" src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
<h1>Test</h1>
<p class="line-clamp-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet leo eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id velit pharetra, vitae vehicula augue convallis. In nec euismod
felis. Nunc eget ornare ligula. Praesent finibus ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim, quis facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin
vitae. Sed dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque sed, mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec eleifend ultricies
justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula diam feugiat felis, eget consectetur nibh est et dolor.</p>
</article>
</section>
This property is in the process of being standardized as line-clamp, but not implemented yet.
Further information:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
https://caniuse.com/css-line-clamp

Answer 2

It is possible to use display: flex to make columns to be aligned like row. Then if you want to avoid overflow, we can delete max-height:
.article {
padding: 35px;
width: 100%;
border-radius: 10px;
box-shadow: 0 0 0.50rem black;
}
img {
height: 200px;
width: 200px;
padding-right: 25px;
object-fit: contain;
}
.container {
display: flex;
flex-direction: row;
}
.one {
flex-basis: 10%;
background-color: aqua;
}
.two {
flex: 1;
background-color: aquamarine;
}
<section>
<article class="article">
<div class="container">
<div class="one">
<img class="article_img"
src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
</div>
<div class="two">
<h1>Test</h1>
<p style="overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet
leo
eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id
velit pharetra, vitae vehicula augue convallis. In nec euismod felis. Nunc eget ornare ligula. Praesent
finibus
ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim,
quis
facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin vitae. Sed
dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque
sed,
mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec
eleifend
ultricies justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula
diam feugiat felis, eget consectetur nibh est et dolor.</p>
</div>
</div>
</article>
</div>
</section>
UPDATE:
If you want to have a fixed height, then it is necessary to use overflow-y: scroll. Otherwise, the content of will overflow article element:
.article {
width: 100%;
padding: 35px;
max-height: 200px;
height: 200px;
border-radius: 10px;
box-shadow: 0 0 0.50rem black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: flex;
height: 100%;
}
.one {
flex: 0 0 20%;
white-space: nowrap;
}
.two {
flex: 0 0 80%;
overflow-y: hidden;
white-space: normal;
height: 100%;
}
.article_img {
max-width: 100%;
max-height: 100%;
padding-right: 25px;
height: auto;
object-fit: contain;
}
.ellipsis {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<section>
<article class="article">
<div class="container">
<div class="one">
<img class="article_img" src="https://cdn.easycash.fr/img/prod/0/0/3/9/4/1/9/8/1/src/6556940-sony-ps3-slim-noir-320-go-sans-manette.jpg">
</div>
<div class="two">
<h1>Test</h1>
<div class="ellipsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia laoreet
leo
eget congue. Vestibulum vulputate sed risus vel accumsan. Vivamus sed rhoncus libero. Sed placerat dolor id
velit pharetra, vitae vehicula augue convallis. In nec euismod felis. Nunc eget ornare ligula. Praesent
finibus
ipsum at imperdiet imperdiet. Aenean at pulvinar ligula, nec rhoncus metus. Vivamus luctus lobortis enim,
quis
facilisis diam pulvinar ut. Integer ultricies pellentesque leo, sed bibendum justo sollicitudin vitae. Sed
dictum ipsum et bibendum porta. Nam vulputate tempus dui vel volutpat. Donec massa diam, fringilla eu neque
sed,
mattis tincidunt tortor. Nulla neque purus, dictum non porttitor vitae, fermentum rhoncus lorem. Donec
eleifend
ultricies justo, pretium interdum magna tempus vel. Suspendisse ultrices, tortor at placerat commodo, ligula
diam feugiat felis, eget consectetur nibh est et dolor.
</div>
</div>
</div>
</article>
</section>