CSSのフレキシボックスオーバーフロー100％の幅素子を

Question

上、私はお互いに隣に座っている2つのたわみ要素の位置を変換します

<div class="container"> 
    <div class="element">Normal</div> 
    <div class="element">Hover</div> 
</div> 

Iは、両方の要素が100％親の幅と私は上にマウスにXを変換することができオーバーフローするための第2の要素になりたいです。私が持っている問題は、両方の要素がコンテナに押し込まれることです。

私は別のdivに2つの要素をラップし、それに200％の幅のコンテナを与えることができます。しかし、あなたは書いた、これはフレキシボックス

Answer 1

.container { 
 
    display: flex; 
 
    width: 200px; 
 
    overflow: hidden;   /* hides the flex item parked outside the container */ 
 
    cursor: pointer; 
 
    border: 1px solid black; 
 
} 
 

 
.element { 
 
    height: 100px; 
 
    flex: 0 0 100%;   /* can't grow, can't shrink, fixed an 100% width */ 
 
    transition: .5s; 
 
    min-width: 0;    /* override min-width: auto default; 
 
           https://stackoverflow.com/q/36247140/3597276 */ 
 
} 
 

 
.container:hover > .element:first-child { 
 
    flex-basis: 0; 
 
} 
 

 
.element:first-child { background-color: lightgreen; } 
 
.element:last-child { background-color: orange; }

<div class="container"> 
 
    <div class="element">Normal</div> 
 
    <div class="element">Hover</div> 
 
</div>

で行うことができるかどうかを知りたい：

を私がいる問題は、両方の要素を容器にして圧迫さです。フレックス項目は、それらが容器の内側に収まるようにするために収縮することが許可されている意味、flex-shrink: 1に、デフォルトでは、設定されているので、おそらくだった

。私の答えではflex-shrinkは0に設定されています。