当元素被点击时，避免flexbox随着CSS展开

Avoid flexbox to expand with CSS when element is clicked

本文关键字：flexbox 避免 随着 CSS 展开 元素      更新时间：2023-09-26

我有两个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应该是外部的容器，当它可见-有人可以帮助我吗?

将position: absolute;添加到.expanddiv中，将该div推到框外

https://jsfiddle.net/4724m90k/

相关文章：