div overflows and covers next div when expanding height

Question

I have several divs on one page that each have a "see more details" link. When clicked, the div expands and should fill the height of the parent div with no issues. however, each div overflows onto the next parent div until i scroll, then it adjusts. how do i make the div grow without spilling over?

what's happening now

what i want to happen

$(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>

score 2 · Answer 1 · answered Jun 14 '17 at 21:43

I think we'd need more information to help you, but I suspect your .col1 and .col2 classes have their float property set. You would need to apply a clearfix to their parent to expand it to fit.

.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>

div overflows and covers next div when expanding height

1 Answers1