Как мне увеличить родительский рост?

Question

Я создаю систему загрузки документов и хочу, чтобы строки всех документов, которые были загружены, с последней строкой, являющейся строкой «добавить другой документ». В настоящее время контейнер списка со строками не расширяется, а просто уменьшает высоту элементов в списке. Вместо этого я пытаюсь увеличить родительскую высоту, чтобы включить все элементы в список. Любая помощь приветствуется!

import React, { Component } from 'react';

export class Upload extends Component {
    render() {
        return (
            <div style={{'height': '100vh', 'display': 'flex', 'justifyContent': 'center', alignItems: 'center'}}>
                    <div style={{'flex': 0.8, maxWidth: 800, flexGrow: 1, 'borderRadius': 10, 'boxShadow': '0px 0px 10px #82828240', 'paddingLeft': 50, 'paddingRight': 50, 'paddingTop': 100, 'paddingBottom': 100, display: 'flex', flexDirection: 'column'}}>
                        <div>
                            <h2>Document upload</h2>
                            <p>Some subtitle placeholder</p>
                        </div>
                        <hr />
                        <div style={{'display': 'flex','flexDirection': 'column', backgroundColor: 'red'}}>
                            <div style={{flex: 1, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            <div style={{flex: 1, flexShrink: 0, backgroundColor: 'blue', marginTop: 20, marginBottom: 20}} />
                            {/* <button type='button' style={{'flex': 1, flexShrink: 0, 'borderStyle': 'dashed'}} onClick={() => this.input.click()}/>
                            <input id='file-upload' type="file" style={{display: 'none'}} ref={(input) => this.input = input}/> */}
                        </div>

                    </div>
            </div>
        );
    }
}

Answer 1

Удалить height: 80% и изменить li на div.