CODEWITHSUNDEEP
reactjsflexbox
joethemow
joethemow

Reputation: 1773

How would I get the parent height to increase?

I am creating a document upload system and want to have rows of all the documents that have been uploaded with the last row being the "add another document" row. Currently, the list container with the rows is not expanding and instead just reducing the height of the items in the list. Instead, I am trying to get the parent height to expand to include all the items in the list. Any help is appreciated!

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>
        );
    }
}

Upvotes: 0

Views: 35

Answers (1)

gkeenley
gkeenley

Reputation: 7418

Remove height: 80% and change the li to a div.

Upvotes: 1

Related Questions