有一個div，它的父母（flexbox）的大小相同

Question

我有幾個div的被叫項目。它們與柔性盒一起使用。 在這些項目裏面，我想要一個完全相同尺寸的div。 但由於某些原因，它們與容器的尺寸相同。

我該如何讓.background-img與.item有相同的尺寸？

點擊時的過渡應該仍然像現在這樣。

HTML：

<div class="container"> 
    <div class="item" style="background: red"><div class="background-img"></div></div> 
    <div class="item" style="background: green"><div class="background-img"></div></div> 
    <div class="item" style="background: blue"><div class="background-img"></div></div> 
    <div class="item" style="background: purple"><div class="background-img"></div></div> 
</div> 

JS：

$(".item").click(function() { 

    var focused = $(this).hasClass("focused");  

    if (!focused) { 

     $(".item").not(this).each(function() { 
      $(this).addClass("collapse");  
     }); 

     $(this).addClass("focused"); 

    } 
    else { 
     $(".item").removeClass("collapse");  
     $(this).removeClass("focused"); 
    } 

}); 

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden;  
} 

.container { 
    flex-grow: 1; 
    flex-shrink: 0; 
    flex-basis: auto; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.item { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 
    height: 100%; 
    transition: all 0.5s; 
    overflow: hidden; 
} 

.collapse { 
    height: 0%; 
} 

.focused { 

} 

.background-img { 
    /* not this */ 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

http://jsfiddle.net/clankill3r/L8hktsgn/15/

Answer 1

添加相對位置您.item

.item { 
    position: relative; 
} 

然後絕對到.background-img位置與所有方0

.background-img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

它會跟隨他的父母了。