弹出框适合Chrome中的内容宽度，但不适合Edge中的内容

Question

这是我拥有的Sass，在Chrome中可以正常工作，但是无法使容器适合Edge中内容的宽度。

.popover {
    font-family: 'Tahoma', sans-serif;
    max-width: 100%;
    box-shadow: 0 0 15px 6px #646262;

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

    .popover-header {
        font-size: 13px;
        background-color: $purple;
        color: white;
        text-align: center;
        font-weight: bold;

        &::before {
            border-bottom: none;
        }
    }

    .popover-body {
        .btn-group {
            min-width: 100%;
        }

        button {
            font-size: 11px;
            background-color: #d9d9d9;
            color: #000;
            font-weight: bold;
        }
    }
}

Chrome浏览器：

边缘：

做什么？谢谢！

---

编辑：

看起来它可能与Bootstrap中的w-100相关，因此发布了React组件的一部分：

return (
    <th 
        id={k} 
        onClick={
            Number.isInteger(v) ||
            v == 62.5 ||
            v == "Mean" 
                ? 
                this.toggle
                :
                    null
        }
    >
        {Number.isInteger(v) || v == 62.5 ? v + 'th' : v} 
        {v == 'n' ? null : <i className='fas fa-sort'></i>}
        <Popover 
            placement='bottom' 
            isOpen={popoverOpen} 
            target={k} 
            toggle={this.toggle}
        >
            <PopoverHeader>Select New Percentile</PopoverHeader>
            <PopoverBody>
                <Row>
                    <Col>
                        <ButtonGroup size='sm'>
                            {
                                _.map(opt, o => {
                                    if (o < 50) {
                                        return (
                                            <Button 
                                                key={o}
                                                value={o}
                                                id={k}
                                                className='w-100' 
                                                onClick={this.props.handleClick}
                                            >
                                                { o + 'th' }
                                            </Button>
                                        )                                            
                                    }

                                })
                            }
                        </ButtonGroup>
                    </Col>
                </Row>
                <hr />
                <Row>
                    <Col>
                        <ButtonGroup size='sm'>
                            {
                                _.map(opt, o => {
                                    if (o == 50 || o == 'Mean') {
                                        return (
                                            <Button 
                                                key={o}
                                                value={o}
                                                id={k}
                                                className='w-100' 
                                                onClick={this.props.handleClick}
                                            >
                                                {Number.isInteger(o) ? o + 'th' : o}
                                            </Button>
                                        )                                            
                                    }

                                })
                            }
                        </ButtonGroup>
                    </Col>
                </Row>
                <hr />
                <Row>
                    <Col>
                        <ButtonGroup size='sm'>
                            {
                                _.map(opt, o => {
                                    if (o > 50) {
                                        return (
                                            <Button 
                                                key={o}
                                                value={o}
                                                id={k}
                                                className='w-100' 
                                                onClick={this.props.handleClick}
                                            >
                                                {o + 'th'}
                                            </Button>
                                        )                                            
                                    }

                                })
                            }
                        </ButtonGroup>
                    </Col>
                </Row>
            </PopoverBody>
        </Popover>
    </th>
);

Answer 1

并不是真正的解决方案，但是我不得不对# count by main table(df$Main) # new dataframe without "None" df[df$Main != "None", ] # or more explicitly df[df$Main %in% c("Main", "IsMainbody", "IsMainbodyCandidate"), ] 进行硬编码，现在它适合Edge。在这种情况下有效，因为我不需要它小于.popover {min-width: 432px;}，但在需要完全动态的情况下，显然不起作用。