javascript - 防止孩子溢出父母的填充物

Question

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

所有内容都应该以照片底部粗略绘制的虚线结束。

这是我的组件的示例：

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;    
        
`

关于我可能做错/遗漏的任何想法？感谢所有帮助/指导！提前致谢。

标签： javascripthtmlcssreactjsstyled-components