【问题标题】:Flexbox + overflow:hiddden works only in ChromeFlexbox + 溢出:隐藏仅在 Chrome 中有效
【发布时间】:2016-11-23 00:40:12
【问题描述】:

除了 Chrome 浏览器之外,我的左侧边栏内容不尊重 overflow:hidden 时遇到问题。 在 Firefox 中,IE 和 Edge 侧边栏被扩展,而不是被限制为 300 像素的 .container div。有谁知道如何解决此问题?

https://jsfiddle.net/o1uu1d0L/2/

【问题讨论】:

  • 您的示例是错误的 - 您有一个包含 overflow: hidden.buttons-container,但该示例中没有使用该类。如果您将overflow: hidden 放在.container 类上,我认为它会按预期工作?
  • 看了这个问题后我看的时候小提琴不是很清楚......你能检查一下吗?
  • 对不起,我留下了一些不应该在那里的课程。 overflow:hidden 我在divstyle 属性中声明了问题。 @mohsen-newtoa 和 @patryk-Łucka 的两个答案都解决了这个问题。

标签: html css flexbox overflow


【解决方案1】:

尝试改变

.flex-fill {
    display:flex;
    flex:1 1 auto;
}

.flex-fill {
    display:flex;
    min-height: 0;
    flex:1 1 0%;
}

我认为出现这个问题的原因有两个:

第一个问题是IE不接受无单位flex-basis。这就是为什么你必须使用flex: 1 1 0%flex: 1 1 0px 而不是flex: 1 1 0。而flex: 1 1 auto 在这种情况下也不起作用。

第二个问题是 Chrome 和 Firefox 对 display: flex 的不同解释。默认情况下,Firefox 在display: flex 元素上设置min-height: auto; min-width: auto;,Chrome 将其设置为min-height: 0; min-width: 0。而你需要的是第二种选择。

我不确定这个简单的改变是否能解决你所有的问题(但是当我在 IE 和 Firefox 上测试它时看起来还不错)。如果没有,请考虑一下我写的内容,并在其他课程中进行类似的更改。我希望它会有所帮助!

【讨论】:

【解决方案2】:

您的代码有一些更改:

<div class="container">
    <div class="flex-col flex-fill">
        <div class="flex-row flex-fill">
            <div class="flex-col flex-50 dragscroll default-box" style="margin-right:5px;">
                <div class="button selected">1</div>
                <div class="button">2</div>
                <div class="button selected">3</div>
                <div class="button">4</div>
                <div class="button">5</div>
                <div class="button selected">6</div>
                <div class="button selected">7</div>
                <div class="button">8</div>
                <div class="button">9</div>
                <div class="button">10</div>
            </div>

            <div class="flex-fill default-box">
                center
            </div>

            <div class="flex-250 default-box" style="margin-left:5px;">
                side
            </div>
        </div>

        <div class="default-box flex-50" style="margin-top:5px;">
            bottom
        </div>
    </div>
</div>

.container {
    width:500px;
    height:300px;
    display:flex;
    flex-flow:column;
    background:lightblue;
}

.buttons-container {
    min-height:1px;
    height:100%;
    flex:0 1 50px;
    border:1px solid #CCC;
    background:#FFF;
    margin-right:5px;
    overflow:hidden;
    display:flex;
    flex-flow:column;
}

.flex-col {
    display:flex;
    flex-flow:column;
    overflow:hidden;
}

.flex-row {
    display:flex;
    flex-flow:row;
    overflow:hidden;
}

.flex-fill {
    display:flex;
    flex:1 1 auto;
}

.flex-50 {
    display:flex;
    flex:0 0 50px;
}

.flex-250 {
    display:flex;
    flex:0 0 250px;
}

.default-box {
    background:#FFF;
    border:1px solid #CCC;
}

.plot-area {
    display:block;
    position:relative;
    flex:1 1 auto;
    background:#FFF;
    border:1px solid #CCC;
    box-shadow:1px 1px 4px rgba(0,0,0,0.1);
}

.button {
    background:#cfeceb;
    vertical-align:middle;
    margin-bottom:5px;
    text-align:center;
    color:#56b6b2;
    cursor:pointer;
    font-size:26px;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:50px;
}

.button.selected {
    background:#56b6b2;
    color:#FFF;
}

.button:last-child {
    margin:0 !important;
}

【讨论】:

    猜你喜欢
    • 2019-05-24
    • 1970-01-01
    • 1970-01-01
    • 2011-10-22
    • 1970-01-01
    • 2019-11-23
    • 2019-01-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多