css - 无法让按钮换行而不是溢出容器

Question

我无法让 JSFiddle 与 React 和其他一些依赖项一起正常工作，所以我希望这个 Github 存储库的链接足以证明这个问题:

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

基本上，渲染了一组按钮，它们应该自动加宽以填充空白并占据整行。这适用于 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'));

---

.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;
                // }


            }
        }
    }
}

我拥有所有 <Button>包裹在 <Col>因为这应该是通过增加按钮的大小来填充空白区域的。

感谢您的帮助!

Answer 1

IE11 不喜欢计算 flex 元素的宽度。如果您将 flex-basis: calc( 100%/24 ); 添加到 .col 中，它会起作用 :) 显然可以使用您想要的任何宽度，但我给出的是在一行中复制 21 个框。但基本上 flex-basis 需要一个定义的宽度才能工作。

或者为每个元素添加一个额外的类(例如 col-1 )这也会达到同样的目的。