Javascript 防止子项溢出父项'；填充物

我有一个组件，里面有几个孩子。如果内容太大，这些子项似乎会溢出父项的填充。见下图

所有内容都应该在照片底部粗画的虚线处结束

下面是我的组件的外观示例：

import React from 'react'
import styled from 'styled-components';

function Video(){

   const data = {
       channel: 'Govana',
       name: 'Video Four',
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   }

    return(
    <VideoWrapper>
        
        <Wrapper>
        </Wrapper>
    
        <Info>
            <Title>{data.name}</Title>
            <ChannelName>{data.channel}</ChannelName>
            <Description>{data.description}</Description>
        </Info>      
        
    </VideoWrapper>
    )
}

const Title = styled.h2`
    font-size: 1.5rem;
    font-weight: 700;
`

const Description = styled.p`
    font-weight: 100;
    font-size: 0.9rem;    
    width: 100%;
    display: block;
`

const ChannelName = styled.h3`
    font-size: 1.2rem;
    font-weight: 500;
`

const VideoWrapper = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;500;700&display=swap');
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 20px;
    border: 1px solid #cbd5e0;
    border-radius: 5px;
    margin: 20px;    
    letter-spacing: .025em;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    max-height: 200px;
    min-height: 200px;
    box-sizing: border-box;
`
const Info = styled.div`
    flex: 1 200px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: green;    
    text-overflow: ellipsis;
`

const Wrapper = styled.div`
    flex: 1 200px;      
    margin-right: 20px;
    background-color:red;
    box-sizing: border-box;    
        
`

从“React”导入React
从“样式化组件”导入样式化；
函数视频（）{
常数数据={
频道：“戈瓦纳”，
名称：'视频四'，
说明："知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不自以为是，就必须为自己的行为负责。”
}
返回(
{data.name}
{data.channel}
{data.description}
)
}
const Title=styled.h2`
字体大小：1.5rem；
字号：700；
`
const Description=styled.p`
字号：100；
字体大小：0.9rem；
宽度：100%；
显示：块；
`
const ChannelName=styled.h3`
字号：1.2rem；
字号：500；
`
const VideoWrapper=styled.div`
@导入url（'https://fonts.googleapis.com/css2?family=Inter:wght@100；200；500；700&display=swap'）；
字体系列：“Inter”，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
填充：20px；
边框：1px实心#cbd5e0；
边界半径：5px；
利润率：20px；
字母间距：.025em；
溢出：隐藏；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
柔性包装：包装；
最大高度：200px；
最小高度：200px；
框大小：边框框；
`
const Info=styled.div`
flex:1200px；
溢出：隐藏；
框大小：边框框；
背景颜色：绿色；
文本溢出：省略号；
`
const Wrapper=styled.div`
flex:1200px；
右边距：20px；
背景色：红色；
框大小：边框框；
`

你知道我可能做错了什么/错过了什么吗？

---

感谢所有帮助/指导！提前感谢。

尝试向家长添加高度或最大高度element@Khant我已经试过了，但没有效果。向Info div添加

width

或

height

属性怎么样？@HarleyLang a height已经设置好了。我看到样式化div

Info

具有flex收缩/增长属性，但没有width和高度，您是否尝试过为该样式组件添加宽度和高度？可能尝试100%的高度