Компонент выходит за пределы страницы, что делает ее не прокручиваемой

Question

У меня есть компонент, который в настоящее время расширяется за пределы страницы до точки, где я его не вижу. Я не могу прокрутить вниз, чтобы увидеть его, но если бы я уменьшил масштаб, то был бы виден весь компонент. Как сделать его прокручиваемым? Есть ли простой способ сделать это с помощью css?

снимок экрана проблемы: (https://i.gyazo.com/263d39c105e90c043b07460ed6b4b9b7.png)

КОД РОДИТЕЛЯ:

        <div className='candidates-list right'>
                <div className='row'>
                    <h1 className='pipeline-title'>Jobs</h1>
                    <button
                        className='create-job'
                        onClick={(e) => {
                            this.showCreateJob(e);
                        }}
                    >
                        Create Job
                    </button>
                </div>
                <JobCard
                    className='jobs-card'
                    jobs_info={this.state.jobs_info}
                    test={this.test}
                    jobCall={this.test2}
                />
            </div>

Класс JobCard

render() {
        if (this.props.jobs_info === undefined) {
            return null;
        }

        return (
            <div className='jobs-card'>
                <div className='row'>
                    {
                        // Ternary statement - return empty div if lenght == 0
                        // Otherwise, return a map function to loop through array
                        // of candidate_info
                        this.props.jobs_info.length === 0 ? (
                            <div></div>
                        ) : (
                            this.props.jobs_info.map((element) => (
                                <JobsInfo
                                    key={element.id}
                                    jobs_info={element}
                                    test={this.props.test}
                                    jobsCallback={this.jobsCallback}
                                />
                            ))
                        )
                    }
                </div>
            </div>
        );
    }

Класс JobsInfo

    render() {
    return (
        <div className='row'>
            <div className='container' onClick={this.test}>
                <div className='row'>
                    <div className='job-title'>
                        {this.props.jobs_info.title}
                    </div>
                </div>
                <div className='row wrapper'>
                    <div className='category-title'>Category</div>
                    <div className='location-title'>Location</div>
                    <div className='type-title'>Type of Job</div>
                    <div className='creator-title'>Job Creator</div>
                </div>
                <div className='row wrapper'>
                    <div className='category'>
                        {this.props.jobs_info.job_team.title}
                    </div>
                    <div className='location'>
                        {this.props.jobs_info.job_location.title}
                    </div>
                    <div className='type'>
                        {this.props.jobs_info.job_work_type.title}
                    </div>
                    <div className='creator'>
                        {this.props.jobs_info.user.name}
                    </div>
                </div>
            </div>
            <div
                className='counter-container'
                id='counter-container'
                onMouseEnter={this.changeBackground}
                onMouseLeave={this.changeBackground2}
            >
                Candidates <br />
                {this.props.jobs_info.candidates_count}
            </div>

            <div className='delete-container center'>
                <ion-icon id='trash' name='trash'></ion-icon>
            </div>
        </div>
    );
}

Answer 1

Как сказал МонтеКристо, нам нужно увидеть ваш код. Но вот быстрое предположение:

Вы можете добавить overflow-y:scroll; к вашему .container классу в css.

Обратите внимание, что вам понадобится height: 500px; (или любая другая высота ) также для работы overflow.