I have a Twitter Timeline embeded into a HTML webpage which is layed out using CSS Grids. Since two weeks ago the Twitter Timeline has started overflowing the parent div no matter what unit is used to specify the height of the parent (em, px, vh), or Web-Browser used. I suspect that something has changed on Twitters side.
How can I force the embed to dynamically fill the height of the parent div without overflowing?
2: 
#test-grid {
width: 87vw;
min-height: 90vh;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem 1rem;
grid-template-areas: ". notice ." ". twitter .";
}
.grid-item {
text-align: center;
background-color: lightcoral;
border-radius: 2px;
}
#notice {
grid-area: notice;
}
#twitter-embed {
grid-area: twitter;
height: 25vh;
}<div id="test-grid">
<div id="notice" class="grid-item">
For Some Reason This Twitter Embed Keeps Overflowing the Grid Cell!
</div>
<div id="twitter-embed" class="grid-item">
<a class="twitter-timeline" href="https://twitter.com/stackoverflow">Tweets by StackOverflow</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>I have reproduced this problem multiple times on various CSS Grid based web-pages.