Html 使用溢出：滚动将行高调整为响应图像div

当我调整浏览器窗口的大小时，会有一个响应图像（img流体）改变它的高度。 在右边我有一个div元素，它在图像旁边包含一些文本，应该有一个溢出：当文本太大时滚动

但是，通过使用文本和图像大小为div元素设置固定的高度，我在图像下面有一些空白，这是我想要避免的

因此，我希望文本div自动调整其高度与img的高度

HTML:

<div id="container">
    <div><img class="img-fluid" src="pic.jpg"></div>
    <div id="text">Lorem ipsum dolor....<div>
</div>

#container {
    display:flex;
    flex-direction:row;
    background-color:green;
}
    
#text {
    height:500px;
    overflow:scroll;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}