按钮不会在Safari 10中包装和溢出容器（在Edge和Chrome中很好用）

Question

Supposed to look like the below (does in Edge & Chrome):

But looks like this in Safari 10:

I've read a few SO questions that have not help resolve the issue. Most recently this one:

Flexbox not working on button or fieldset elements

The answers are not resolving my issue.

How do I get a new button to wrap to a new line instead of overflowing the container?

Here is the Sass and ReactJS component I have. Also, I am using Bootstrap 4.

class BasicQueryCuts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cuts: {}
        }

        this.clearSelection = this.clearSelection.bind(this);
        this.selectAll = this.selectAll.bind(this);
    }

    clearSelection() {
        this.setState({
            cuts: {}
        })
        this.props.clearCuts();

    }

    // pieces together the cuts that are selected
    onCutSelect(cut, str) {

        // want to make sure it stays a number
        // so that it matches the server data
        // tends to convert to string if not specific
        cut = Number(cut);

        this.setState(
            ({cuts: prevCuts}) => (
                this.state.cuts[cut] && str !== 'all'
                ?
                    {cuts: {...prevCuts, [cut]: undefined }}                  
                :
                    {cuts: {...prevCuts, [cut]: cut }}
            ),
            () => this.props.basicQueryResults(this.state.cuts)
        )
    }

    selectAll() {
        const { country } = this.props;
        let { query_data } = this.props;

        if (query_data) {
            if (query_data[0].Country && country) {
                var data = _.filter(query_data, {'Country': country});
            } else {
                var data = query_data;
            } 
        }

        _.map(
            data, c => {
                this.onCutSelect(c.SortOrder, 'all');
            }
        )        
    }

    // These buttons will allow selecting everything, or clearing the selection
    renderAllNothingButtons() {
        let { query_data } = this.props;

        // generate the list of cuts
        if (query_data) {
            return (
                <Row>
                    <Col>
                        <Button color='primary' key='all' className='cuts-btn' onClick={this.selectAll}>
                            Select All
                        </Button>
                    </Col>
                    <Col>
                        <Button color='danger' key='cancel' className='cuts-btn' onClick={this.clearSelection}>
                            Clear All
                        </Button>
                    </Col>
                </Row>
            )            
        }
    }

    // renders the cut multi-list, by first ordering what comes from
    // the server and then depending on the survey
    // setting up the option and value keys
    renderCutsButtons() {
        const { country } = this.props;
        let { query_data } = this.props;

        if (query_data) {
            if (query_data[0].Country && country) {
                var data = _.filter(query_data, {'Country': country});
            } else {
                var data = query_data;
            } 
        }

        // generate the list of cuts
        return (
            <Row>
                {_.map(data, c => {
                    var cut = c.RptCutCat + ': ' + c.RptCut
                    return (
                        <Col key={c.SortOrder}>
                            <Button 
                                className={this.state.cuts[c.SortOrder] ? 'cuts-btn-active' : 'cuts-btn'}
                                key={c.SortOrder}
                                value={c.SortOrder}
                                onClick={event => this.onCutSelect(event.target.value, 'single')}
                            >
                                <span>{cut}</span>
                            </Button>
                        </Col>
                    )}
                )}
            </Row>
        )
    }

    render() {
        const { query_data } = this.props;
        return (
            <div className='results-bq-cuts'>
                {this.renderCutsButtons()}
                {query_data
                    ?
                    <hr />
                    :
                    null
                }
                {this.renderAllNothingButtons()}
                {query_data
                    ?
                    <hr />
                    :
                    null
                }
            </div>
        )
    }
}

---

.results-modal {
    @media all and (max-width: 1250px) {
        max-width: 95%;
    }
    max-width: 1200px;

    .modal-content {

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

            .results-bq-cuts {
                .col {
                    padding:2px;
                }

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

                .cuts-btn-active {
                    font-size: 11px;
                    padding: 3px;
                    width: 100%;
                    background-color: $croner-blue;
                    box-shadow: none;
                } 

                h5 {
                    text-align: left;                
                }

                hr {
                    margin-top: 5px;
                    margin-bottom: 5px;
                }
            }
        }
    }
}

Compiled HTML here:

Answer 1

Turns out it was an issue with Safari 10.0.0. Upgraded the VM I have macOS running in which upgraded Safari and now the issue is gone. Saw some responses that seemed to indicate the issue was addressed in Safari 10.1.