无法将按钮换行到新行而不是溢出容器

Question

I couldn't get a JSFiddle to work properly with React and some other dependencies, so I hope the link to this Github repo is sufficient for demonstrating the issue:

https://github.com/ishraqiyun77/button-issues/

Basically, a group of buttons is rendered and they should be auto-widened to fill white space and take up the whole row. This works in Chrome, Edge, Safari, and Firefox. It looks like this:

This isn't happening in IE. I've been messing with it for hours and haven't made much progress:

Here is the code, although could clone the repo I posted above:

// component.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    Button,
    Col,
    Modal,
    ModalBody,
    ModalHeader,
    Row
} from 'reactstrap';

import styles from '../assets/scss/app.scss';

class TestPrint extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false,
        }
        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            modal: !this.state.modal
        })
    }

    renderContent() {
        let buttons = [];
        for (let i = 1; i < 50; i++) {
            buttons.push(
                <Col key={i}>
                    <Button
                        key={i}
                        className='cuts-btn'
                    >
                        {i} - Test
                    </Button>
                </Col>
            );
        };
        return buttons;
    }

    render() {
        return (
            <div>
                <Button
                    style={
                        {
                            position: 'fixed',
                            top: '50%',
                            left: '50%',
                            transform: 'translate(-50%, -50%)'
                        }
                    }
                    onClick={this.toggle}
                >
                    Open Modal for Buttons
                </Button>
                <Modal
                    size='lg'
                    isOpen={this.state.modal}
                    toggle={this.toggle}
                    className='results-modal'
                >
                    <ModalHeader toggle={this.toggle}>
                        Button Issues
                    </ModalHeader>
                    <ModalBody>
                        <div className='results-bq-cuts'>
                            <Row>
                                {this.renderContent()}
                            </Row>
                        </div>
                    </ModalBody>
                </Modal>
            </div>
        )
    }
}

ReactDOM.render(<TestPrint />, document.getElementById('app'));

---

.results-modal {
    max-width: 1200px;

    .modal-content {

        .modal-body {
            margin-left: 13px;
            margin-right: 13px;

            .results-bq-cuts {
                width: 100%;

                .col {
                    padding:2px;
                }

                .cuts-btn {
                    font-size: 11px;
                    padding: 3px;
                    width: 100%;
                    box-shadow: none;
                }

                // .col {
                //     padding: 2px;
                //     display: table-cell;
                //     flex-basis: 100%;
                //     flex: 1;
                // }

                // .cuts-btn {
                //     font-size: 11px;
                //     padding: 3px;
                //     width: 100%;
                //     box-shadow: none;
                // }


            }
        }
    }
}

I have all of the <Button> wrapped in <Col> because that should be what is filling the white space by increasing the size of the button.

Thanks for the help!

Answer 1

IE11 doesn't like working out the width of flex items. If you add flex-basis: calc( 100% / 24 ); to .col it works :) Obviously use any width you want, but what I've given replicates the 21 boxes on one line. But essentially flex-basis needs a defined width to work. ​

Or add an extra class to each element (such as col-1 ) This'll also achieve the same thing.