當元素被點擊時，避免使用CSS來擴展CSS。

Question

我有兩個div彼此相鄰，包裝在具有display:flex屬性的容器Div中。現在我有這種棘手的問題，我需要能夠點擊div中的一個元素，然後顯示一個先前隱藏的div，它也放在容器中。當隱藏div可見時，容器當然會展開，但是我需要容器不能展開，而且我不能將隱藏的div放在容器外面。我有以下示例代碼：

HTML：

<div id="container"> 
    <div class="content"> 
    <div class="top"> 
     This is the top 
    </div> 
    <div class="bottom"> 
     This is the bottom - click me 
    </div> 
    <div class="expand"> 
     This is hidden content 
    </div> 
    </div> 
<div class="content right"> 
    This is the right content 
</div> 
</div> 

的CSS：

#container { 
    width: 100%; 
    display: flex; 
} 

.content { 
    float: left; 
    width: 49%; 
    border: 1px solid; 
} 

.top, .bottom { 
    height:100px; 
} 

.top { 
    background: #ddd; 
} 

.bottom { 
    background: #eee; 
} 

.right { 
    background: #e9e9e9 
} 

.expand { 
    display:none; 
    background: #999; 
} 

我已經JSFIDDLE - 因此，隱藏的div應在容器外時，其可見的 - 有人可以幫幫我？

Answer 1

添加position: absolute;到.expand DIV推動盒

https://jsfiddle.net/4724m90k/

以外股利