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

【问题标题】：popover box fits to width of contents in Chrome, but not in Edge弹出框适合 Chrome 中的内容宽度，但不适合 Edge
【发布时间】：2019-01-22 17:06:20
【问题描述】：

这是我在 Chrome 中运行良好的 Sass，但无法让容器适应 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;
        }
    }
}

铬：

边缘：

做什么？谢谢！

编辑：

看起来它可能与 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>
);

【问题讨论】：

也许你应该添加overflow:hidden或者你可以使用clear属性来修复浮动？

标签： css reactjs twitter-bootstrap sass bootstrap-4

【解决方案1】：

不是一个真正的解决方案，但我不得不硬编码.popover {min-width: 432px;}，现在它适合 Edge。在这种情况下有效，因为我不需要它小于 432px，但在需要完全动态的情况下，这显然行不通。

【讨论】：