Question

我有父div，在点击时添加子div。在父div上，css为：

display: -webkit-inline-flex;
overflow: auto;
height: 106px;

父div的宽度由bootstrap类设置：

"col-sm-11"

只要元素多于宽度，就会在chrome上显示一个水平条，因为父div上有溢出的css属性，这是完美的。但是相同的属性在Safari中不起作用，并且在Safari中，子div将其宽度调整为父div，并逐渐缩短其宽度以适合父div。任何解决方案都会有所帮助吗？

HTML：

<div id="compare-bar-append" class="col-sm-11">
    <div class="compare-block">
        <div> 
            <h4 class="text-compare event-name truncate"> Gallery </h4>
            <i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ></i>
        </div>
    </div>
    <div class="compare-block">
        <div> 
            <h4 class="text-compare event-name truncate">Gallery</h4>
            <i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ></i>
        </div>
    </div>
    <div class="compare-block">
        <div> 
            <h4 class="text-compare event-name truncate">Gallery</h4>
            <i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ></i>
        </div>
    </div>
    <div class="compare-block">
        <div> 
            <h4 class="text-compare event-name truncate">Gallery</h4>
            <i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ></i>
        </div>
    </div>
</div>

的CSS：

#compare-bar-append{
    display: inline-flex;
    display: -webkit-inline-flex;
    overflow: auto;
    height: 106px;
}

.compare-block{
    border-right: 1px solid #B9C5E3;
    padding-right: 23px;
    padding-left: 23px;
    width: 20%;
}

.compare-block div{
    display: inline-flex;
    display: -webkit-inline-flex;
    width: 100%;
}

Css：Safari行为溢出

0 个答案: