CODEWITHSUNDEEP
javascripthtmlcss
Organiccat
Organiccat

Reputation: 5651

Make child element resize when adding new elements

I have a parent element that has multiple child divs. One, the "content" area, will always be visible and contain a scrollable section of material. My problem is that I can't get it to resize properly based on how many OTHER div elements are included. I could obviously size it manually, but my problem is I have a few dynamic elements that can be added to the parent element that will push the "content" section down.

Is there a way to have the content area resize itself with CSS? Or will I have to use a JS implementation? Here is a basic (without the dynamic element) example of what happens:

JSFiddle here Edit: (updated to include what I want it to look like)

<div id="mytest"> 
    Test
    <div id="topper">
           Other Test
    </div>
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

Edit: My problem is that I don't want "rollit" to expand the parent div, I want "rollit" to readjust itself to fit. This part is key since the "topper" piece in my code is actually added dynamically. In short, the "mytest" div should remain the same size regardless, the topper div is added later, which SHOULD (does not currently) shrink "rollit" so that "rollit" still fits within the parent div.

Upvotes: 0

Views: 413

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Add this style to mytest:

display: table;

Add two divs to mytest, with these classes:

.row1 {
  display: table-row;
  height: 0px;
}

.row2 {
  display: table-row;
}

row2 will contain the content you want to fit (rollit). row1 will contain the rest of the content.

Because you're setting a height on mytest, its rows will try to expand proportionally to fit that height. height: 0px causes row1 to take up only as much height as is needed for its content.

The overflow style on rollit prevents row2 from growing beyond the bounds of mytest.

Snippet:

#mytest {
  display: table;
  height: 150px;
  border: 1px solid #000;
  background: yellow;
}

.row1 {
  display: table-row;
  height: 0px;
}

.row2 {
  display: table-row;
}

#topper {
  height: 30px; 
}

#rollit {
  height: 100%;
  width: 200px;
  overflow: auto; 
}
<div id="mytest">
  <div class="row1">
    Test
    <div id="topper">
      Other Test
    </div>
  </div>
    
  <div class="row2">
    <div id="rollit">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Something like this 

#mytest {
    border: 1px solid #000;
}
#topper {
    height: 30px;
}
#rollit {
    width: 50%;
    overflow: auto;
    height:200px;
}

basically, do not set a height to an element you want to auto-expand..

http://jsfiddle.net/gaby/yLa6v2qk/5/

Upvotes: 1

Related Questions