CODEWITHSUNDEEP
css
parker
parker

Reputation: 193

Expand div when divs nested inside overflow

I am trying to figure out how to expand a div when the children contain divs that overflow (to show overlapping images);

div.container {
  position:relative
}
div.column {
  display: inline-block; // in my case I want to avoid wrapping
  width: 180px;
}
div.item-contains-long-image {
  display: block;
  height: 25px;
  overflow: visible;
  position: relative;
}

I would like the container to expand vertically to contain the images overflowing from the inner div. I could add padding to the bottom of the div equivalent to the image height, but am looking for a better way.

Upvotes: 1

Views: 47

Answers (2)

SirPilan
SirPilan

Reputation: 4837

@Teobis i took your answer as base for a flex example, hope you dont mind :)

div.container { /* this has been rewritten */
  display: flex;
  flex-direction: row;
}
div.column {
  border:1px solid blue; /*just to show the size*/
  display: inline-block; /* in my case I want to avoid wrapping */
  width: 180px;
  vertical-align:top;
}
div.item-contains-long-image {
  display: inline-block;
  height: 25px;
  /* overflow: visible; no needed, default property*/
  position: relative;
  
}
<div class="container">
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x270">
        </div>
      </div>
      
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x310">
        </div>
      </div>

      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x110">
        </div>
      </div>
    </div>

Upvotes: 2

Teobis
Teobis

Reputation: 845

Is this structure what you are looking for??

First of all, you need white-space:nowrap; on the parent of display: inline-block; or you could use flexbox;

div.container {
  position:relative;
  border:1px solid red; /*just to show the size*/
  white-space:nowrap; /*Necesary for no wrap on .column*/
  min-height:150px; /* minimum height */
}
div.column {
  border:1px solid blue; /*just to show the size*/
  display: inline-block; /* in my case I want to avoid wrapping */
  width: 180px;
  vertical-align:top;
}
div.item-contains-long-image {
  display: inline-block;
  height: 25px;
  /* overflow: visible; no needed, default property*/
  position: relative;
  
}
    <div class="container">
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x270">
        </div>
      </div>
      
      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x310">
        </div>
      </div>

      <div class="column">
        <div class="item-contains-long-image">
          <img src="http://via.placeholder.com/180x110">
        </div>
      </div>
    </div>

Hope this helps

Upvotes: 1

Related Questions