javascript - 单击元素时避免 flexbox 使用 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 将 div 推到框外

https://jsfiddle.net/4724m90k/