他のフレックスアイテムのオーバーフローが発生した場合のフレックスアイテムの折りたたみマージン：auto;

これはちょうど起こったと信じている奇妙なものなので、Chromeの新しいバグかどうかはわかりません。 FirefoxとIE10 +は問題ありません。他のフレックスアイテムのオーバーフローが発生した場合のフレックスアイテムの折りたたみマージン：auto;

基本的に、私はマージン左：flexを持つflexアイテムを持っています。正常に動作します。

しかし、別のフレックスアイテムにオーバーフローが発生したコンテンツがあると、レンダリング時に余白が崩壊するようです。ブラウザを移動すると、ブラウザ自体が修正されます。奇妙な！？

アイデアのフロントエンド？

注：例を数回リフレッシュする必要があるかもしれません。これは、o.kをレンダリングする時間の25％です。

http://codepen.io/rhysyg03/pen/rePgQY

<h3>Working Example</h3> 
<div class="flex"> 
    <div class="flex__item"> 
    <div class="dropdown"> 
     <span>Custom Dropdown</span> 
     <div class="dropdown__content"> 
     <div style="height:40px; border:1px solid red;">Dropdown Content overflow not being evoked</div> 
     </div> 
    </div> 
    </div> 
    <div class="flex__item flex__item--right ">Right</div> 
</div> 

<h3>Broken Example</h3> 
<div class="flex mb"> 
    <div class="flex__item"> 
    <div class="dropdown"> 
     <span>Custom Dropdown</span> 
     <div class="dropdown__content"> 
     <div style="height:100px; border:1px solid red;">Dropdown Content</div> 
     </div> 
    </div> 
    </div> 
    <div class="flex__item flex__item--right ">Right</div> 
</div> 

.flex { 
    display:flex; 
    flex-flow: row nowrap; 
    border:1px solid; 
    width: 100%; 
} 
.flex__item--right { 
    margin-left: auto; 
    background: red; 
    color: white; 
} 
.dropdown { 
    position: relative; 
    display: inline-block; 
} 
.dropdown__content { 
    max-height: 50px; 
    overflow-y: auto; 
} 
.mb { 
    margin-bottom: 20px; 
}

出典

2016-05-10 Rhys

これはそれに打撃を与えたが、ええ、うまくいけば、CSSの答えを探してくれてありがとうねえクロームバージョンの最新バージョン50.0.2661.102メートル

出典

2016-06-02 07:19:15 Rhys

適切な方法であなたの質問に答えるために、私は私が知らないことを認めざるを得ません。

しかし、私が何かremarckedました：あなたはあなたのCSSは、処理中に変更すると

を、Chromeが働いています。ページをリロードするとバグが発生します。

これを知ると、問題を "回避"するためにいくつかのことを試みることができます。

JQueryライブラリを追加し、HTMLページで読み込むスクリプトを追加できます。

<body onload="scriptName()">

あなたはこの要素に別のCSSスタイル属性にしたい：

function scriptName(){ 
    document.getElementById("flex__item--right").style.margin-left="auto"; 
}

これはそれを修正するための最良の方法ではありませんが、それは時間のために働く必要があります。

出典

2016-05-10 08:06:24 Relisora

に固定しているように見えます。 – Rhys

他のフレックスアイテムのオーバーフローが発生した場合のフレックスアイテムの折りたたみマージン：auto;

答えて

関連する問題