柔性柱和最大高度漏洞谷歌瀏覽器

在谷歌瀏覽器，Safari瀏覽器和IE我遇到與Flex內容的溢出問題。柔性柱和最大高度漏洞谷歌瀏覽器

我相信這個問題與Chrome不會將flex對象級聯到它的子級的方式有關。

我相信處理flex對象的正確方法是刪除所有height/width和max-height/max-width屬性並使用flex屬性來確定大小限制。 e.g：

display: 
flex: 0 0 100px;

然而，由於柔性物體定向爲column我不能做到這一點。此外，這個「bug」只發生在使用img時。用div替換img會導致flex按預期運行。

例（在Chrome瀏覽）

span{ 
 
    background:#4b0; 
 
} 
 
.Flx { 
 
    display: flex; 
 
} 
 
.Child { 
 
    display: flex; 
 
    flex:1; 
 
    align-items: center; 
 
    justify-content: center; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
    background-color: #aaa; 
 
} 
 
.Child img { 
 
    max-height: 100%; 
 
    background-color: #fb4a4a; 
 
}

<div class="Flx"> 
 
    <div class="Child"> 
 
    <span>TEXT</span> 
 
    <img src="https://i.stack.imgur.com/440u9.png"> 
 
    </div> 
 
</div>

來源

2017-06-27 Obsidian

檢查更新的答案可能是它會幫助你 – LKG

可能指導意見：https://stackoverflow.com/q/44521054/3597276 –

看來，這種使用Flex和百分比上img標籤簡單地改變％至像素時解決該問題出現：

max-height: 100px;

span{ 
 
    background:#4b0; 
 
} 
 
.Flx { 
 
    display: flex; 
 
    flex:1; 
 
} 
 
.Child { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center;  
 
    flex-direction: column; 
 
    background-color: #aaa; 
 
} 
 
.Wrap{ 
 
    align-items: center; 
 
    justify-content: center; 
 
    background:#00d; 
 
} 
 
.Wrap img { 
 
    max-height: 100px; 
 
    max-width:100%; 
 
    background-color: #fb4a4a; 
 
}

<div class="Flx"> 
 
    <div class="Child"> 
 
    <span>TEXT</span> 
 
    <div class="Flx Wrap"> 
 
     <img src="https://i.stack.imgur.com/440u9.png"> 
 
    </div>  
 
    </div> 
 
</div>

來源

2017-06-27 13:36:17 Obsidian

柔性柱和最大高度漏洞谷歌瀏覽器

回答

相關問題