Css Can'；不要让按钮包装到新行，而不要使容器溢出

我无法让JSFIDLE与React和其他一些依赖项一起正常工作，因此我希望指向此Github repo的链接足以演示此问题：

基本上，一组按钮被渲染，它们应该自动加宽以填充空白并占据整行。这适用于Chrome、Edge、Safari和Firefox。看起来是这样的：

这在IE中是不会发生的。我已经花了几个小时来处理它，但没有取得多大进展：

下面是代码，尽管我可以克隆上面发布的回购协议：

// 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'));

我将所有的

包装在

中，因为这应该是通过增加按钮大小来填充空白的内容

---

谢谢你的帮助

IE11不喜欢计算弹性项的宽度。如果您添加弹性基础：计算（100%/24）to.col它可以工作：）显然，可以使用您想要的任何宽度，但我给出的是在一行上复制21个框。但基本上flex basis需要一个定义的宽度才能工作。 ​

---

或者为每个元素添加一个额外的类（例如

col-1

），这也可以实现同样的效果。

IE11不喜欢计算弹性项的宽度。如果您添加弹性基础：计算（100%/24）to.col它可以工作：）显然，可以使用您想要的任何宽度，但我给出的是在一行上复制21个框。但基本上flex basis需要一个定义的宽度才能工作。 ​

---

或者为每个元素添加一个额外的类（例如

col-1

），这也可以实现同样的效果。

嘿，它们的效果要好得多！使用

flex基准得出的结果更接近预期：calc（100%/24）。现在的问题是它没有根据按钮的内容加宽按钮。我将把它作为一个完全不同的问题来处理。嘿，它们确实工作得更好！使用
flex基准得出的结果更接近预期：calc（100%/24）。现在的问题是它没有根据按钮的内容加宽按钮。我将把它作为一个完全不同的问题来处理。
.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;
                // }


            }
        }
    }
}