Reactjs 底部的粘性文本溢出

我使用的是react sticky，它整体工作正常，但文本在StickyContainer底部溢出。我希望当我碰到容器底部时，粘性文本停止，而不是溢出到页脚中。

{（{风格
}) => 
(
{this.state.service}
{this.state.text}

)}

您可以为文本容器添加文本溢出CSS。

 <StickyContainer > 
        <section >
            <div class="container">
                <div class="row mb-4">
                    <div class="col-md-8">
                        <a class="mb-4 d-block" href="" data-fancybox="portfolio" data-caption="Perfect planning">
                        { (this.state.photo1.substr(this.state.photo1.length - 3) == 'mp4') ? 
                           <video preload="metadata" controls>
                           <source src={this.state.photo1 + '#t=0.5'} type="video/mp4" />
                           Your browser does not support the video tag.
                           </video>
                          :  
                            <img src={this.state.photo1} alt="" />
                        }  
                        </a>
                        <a class="mb-4 d-block" href="" data-fancybox="portfolio" data-caption="Kitchen design">
                        { (this.state.photo2.substr(this.state.photo2.length - 3) == 'mp4') ? 
                           <video preload="metadata" controls>
                           <source src={this.state.photo2 + '#t=0.5'} type="video/mp4" />
                           Your browser does not support the video tag.
                           </video>
                          :  
                            <img src={this.state.photo2} alt="" />
                           }
                        </a>                         
                    </div>                     
                    <div class="col-md-4">
                    <Sticky topOffset={50} distanceFromBottom={30}>
                        {({ style
                        }) => 
                        (
                            <header style={{...style, top:'30px', bottom:'0px',  }}>
                               
                            <h2>{this.state.service} </h2>
                            <div className="msg-wrapper" style={wrapper}>
                        <p >{this.state.text} </p>
                        </div>
                        </header>
                       )}
                    </Sticky>                  
                    </div>
                </div>            
            </div>   
        </section>
        </StickyContainer>