18

Is there a way to do this with just css and no scripting? I have a div with a min-width, and inside of it is an absolutely positioned inner div with dynamically generated content of variable width. Sometimes the content extends beyond the containing div, but since its absolutely positioned it won't stretch the containing div. How do i get it to stretch the containing div? Thanks

Joey
  • 10,504
  • 16
  • 39
  • 54

4 Answers4

5

If your content element has position: absolute, it is not possible. However, sometimes you can avoid the absolute positioning and yet obtain the desired result by using a floating element instead. See this answer to a very similar question for an example.

Community
  • 1
  • 1
lex82
  • 11,173
  • 2
  • 44
  • 69
0

The trick is to set the absolute div to have full width and height:

position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
width: 100vw;
height: 100vh;

(You can reduce the width and height to prevent the element from overflowing the page.)

Then you can just put a children's div into the absolute positioned div and it will grow as much as it needs.

To prevent the children's div to fit the parent div, you can add this to the absolute positioned div:

display: flex;
align-items: flex-start;

Then the children will minimize its width while still being able to grow.

Clément Grennerat
  • 1
  • 2
0

Try referencing this JSfiddle i made. http://jsfiddle.net/gA7mB/ If I read it right that is basicly what you are looking for.

HTML

<div class="container" >
<div class="relative" >
    <div class="absolute" >

        <h1>I am Content i can be as long as you wish. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</h1>

    </div>
</div>

​

CSS

.container{
    width: 500px;            
}

.relative{
    position: relative;
    background: #666;
    min-width: 200px;
    min-height: 200px;
}

.absolute{
    position: absolute;
    background: #999;
    top: 20px;  /* not important, just to show absolute position */
    left: 20px; /* not important, just to show absolute position */ 
}
laymanje
  • 833
  • 5
  • 9
  • 3
    This works great for maintaining the width of the child, but is there a way to make the parent's height encompass the child as well? – Bryan Head Oct 11 '13 at 16:10
  • Not working if absolute `div` not fullfilled with so much text inside of it. This example works only if there is a lot of content to fullfill the abosulte positioned `div`. – Payalord Jul 09 '18 at 22:40
-1

An alternative would be using Grid instead of position: "absolute".

this will ensure the container fits the area you want to position your content.

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

later you assign the content to the area like so. If you use position relative, you can still use the top, left, right, bottom properties; they will behave absolutely to the container and the container will fit the content;

.child {
    grid-column: 1;
    grid-row: 1;

    position: relative;
    top: 20px;
}
marcosjam
  • 1
  • 1