divはオーバーフローし、次のdivをカバーします。

Question

1つのページに複数のdivがあり、それぞれに「詳細を見る」リンクがあります。クリックすると、divが展開され、問題のない親divの高さを埋め込む必要があります。ただし、各divはスクロールするまで次の親divにオーバーフローし、調整されます。 divを溢れさせることなく成長させるにはどうすればいいですか？

今何が起こっているのか

私は

$(function() { 
 
    var minHeight = null; 
 
    var expCb = function($el) { 
 
    $el.addClass('expanded'); 
 
    $el.find('.expand-details').text('Details -'); 
 
    }; 
 
    var collapseCb = function($el) { 
 
    $el.removeClass('expanded'); 
 
    $el.find('.expand-details').text('Details +'); 
 
    }; 
 
    $('.details-content a.expand-details').click(function() { 
 
    var currentCb = $(this).parent().hasClass('expanded') ? collapseCb : expCb; 
 
    currentCb($(this).parent()); 
 
    updateCardDetailsLockups(); 
 
    return false; 
 
    }); 
 
});

.details-content { 
 
    max-height: 18px; 
 
    overflow-y: hidden; 
 
} 
 

 
.details-content.expanded { 
 
    max-height: 2000px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent1"> 
 
    <div class="child col1"> 
 
    <div class="details-content"> 
 
     <a href="#" class="details-header expand-details">details +</a> ... 
 
    </div> 
 
    </div> 
 
    <div class="child col2"> 
 
    ... 
 
    </div> 
 
</div> 
 

 
<div class="parent2"> 
 
    <div class="child col1"> 
 
    <div class="details-content"> 
 
     <a href="#" class="details-header expand-details">details +</a> ... 
 
    </div> 
 
    </div> 
 
    <div class="child col2"> 
 
    ... 
 
    </div> 
 
</div>

Answer 1

が起こるしたいのか、私たちはあなたを助けるために多くの情報を必要とするだろうと思うが、私はあなたのことを疑う。.col1および.col2クラスは、floatプロパティセットを持っています。それに合わせて拡張するには、親にclearfixを適用する必要があります。

.details-content { 
 
    max-height: 18px; 
 
    overflow-y: hidden; 
 
} 
 

 
.details-content.expanded { 
 
    max-height: 2000px; 
 
    display:block; 
 
} 
 

 
.parent1 { border: 4px solid orangered; /* for visibility */ } 
 
.parent2 { border: 4px solid teal; /* for visibility */ } 
 
.col1 { float: left; /* assuming this is the case */ } 
 

 
/* Here is the clearfix, apply it to your container */ 
 
.with-clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="parent1 with-clearfix"> 
 
    <div class="child col1"> 
 
     <div class="details-content expanded"> 
 
      <p>With clearfix, the parent container is sized based on its floating children. You can see the red-orange border surrounding the content.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="parent2 without-clearfix"> 
 
    <div class="child col1"> 
 
     <div class="details-content expanded"> 
 
      <p>Without clearfix, the teal border is collapsed and the children are spilling out of the parent. A clearfix is needed to size the parent to its children.</p> 
 
     </div> 
 
    </div> 
 
</div>