如何使用CSS将div的内容设置为在父div内可见

Question

我希望expandable_container div中的内容可见。 现在，它在添加align-items：center到可扩展div时向上移动。

我有一个包含列表项的侧面板。当列表项溢出时，我添加一个展开按钮。单击该按钮应显示列表项的全部内容。它有效，但随后。当列表项中的内容溢出时，列表项中的内容将被看到一半。就像下面的图片一样

我希望该内容正确放置。我尝试将padding-top添加到可扩展类中。但是，这将影响其他没有可扩展组件的列表项。我怎样才能解决这个问题。下面是代码，

export default class Expandable extends React.PureComponent{
    constructor(props) {
        super(props);
        this.expandable_ref = React.createRef();
        this.state = {
            expanded: false,
            overflow: false,
        };
     }

     componentDidMount () {
         if (this.expandable_ref.current.offsetHeight < 
             this.expandable_ref.current.scrollHeight) {
             this.setState({overflow: true});
         }
     }

     on_expand = () => {
         this.setState({expanded: true});
         console.log("in expnad");
     };

     on_collapse = () => {
         this.setState({expanded: false});
     };

     render () {
         return (
             <div className={(this.state.overflow ? 
                 this.props.container_classname : '')}>
                 <div className={(this.state.overflow ? 
                 this.props.classname : '')} style={{overflow: 'hidden', 
                 display: 'flex', height: (this.state.expanded ? null : 
                 this.props.base_height)}}
                 ref={this.expandable_ref}>
                    {this.props.children}
                 </div>
                 {this.state.overflow && this.state.expanded &&
                     <div className={this.props.expand}>
                         <button  onClick={this.on_collapse}> 
                             {this.props.arrow_up}</button>
                     </div>}
                 {this.state.overflow && !this.state.expanded &&
                     <div className={this.props.expand}>
                         <button onClick={this.on_expand}> 
                             {this.props.arrow_down}</button>
                     </div>}

            </div>
        );
    } 
}

Class SidePanel extends React.purecomponent {
    switch (notification.type) {
        case 'new_model_uploaded':
            return (
                <Expandable
                     base_height={42}
                     arrow_down={<SvgAccDown className='grey' width="10" 
                     height="10"/>}
                     arrow_up={<SvgAccUp className='grey' width="26" 
                     height="26"/>}
                     container_classname='expandable_container'
                     classname='expandable'
                     expand='expand'>
                     <ListItem
                         icon={<SvgProject width="26" height="26"/>}
                         text={<Text
                         name={notification.initiator.name}
                         text=' created model '
                         model_name={notification.attributes.modelname}/>}
                         timestamp={notification.timestamp}>
                         <div className="additional_details">
                             <PreviewImage
                                 width={70}
                                 height={70}
                                 model_id={filtered_model.id}
                              />
                          </div>
                 </ListItem>
             </Expandable>
        );
    case 'deleted':
        return (
            <ListItem
                icon={<Svg width="20" height="22"/>}
                text={<Text
                name={notification.initiator.name}
                text=' deleted model '
                model_name={notification.attributes.modelname}/>}
                timestamp={notification.timestamp}/>
        );}

}

function ListItem(props) {
    return (
        <li className="notification">
            <div className="details_container">
                <div className="details">
                    {props.icon}
                    {props.text}
                    <Timestamp>{props.timestamp}</Timestamp>
                </div>
                {props.children}
            </div>
        </li>
    ); 
}


.notification {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 8px;
    min-height: 49px;
    flex-grow: 1;

    li {
        list-style: none;
    }

    .details_container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-right: 8px;

       .details {
            display: flex;
            color: #333;
            align-items: center;
            flex-grow: 1;

            svg {
                margin-right: 8px;
                margin-left: 7px;
                flex: 0 0 auto;
                align-self: center;
                flex-shrink: 0;
            }

            span {
                flex-grow: 5;
                text-align: left;
            }

           time {
               flex: 0 0 auto;
               margin-left: 8px;
               padding-top: 2px;
               color: #CCCCCC;
           }
        }

        .additional_details {
            flex-basis: 100%;
            width: 226px;
            margin-left: 11%;

            span {
                display: block;
                word-break: break-all;
                margin-left: 2px;
            }
        }
    }
}

.expandable_container {
    display: flex;
    margin-top: 8px;
    flex-direction: column;
    border-bottom: 1px solid #CCCCCC;

    .expandable {
        align-items: center;
        padding-top: 35px;
     }
}

.expand {
    display: flex;
    align-items: center;
    position: relative;
    top: 10px;
    border: 1px solid #CCCCCC;
    width: 150px;
    height: 20px;
    left: 30%;
    background-color: $white;
    justify-content: center;
}

有人可以帮我解决这个问题吗？