Syd Amir Syd Amir - 24 days ago 13
CSS Question

parent's relative position grows to fit the child absolute position height

How can I set the height of a parent (

relative
position) to height of the it's children?

Take a look at this pen to see it in action.



blockquote {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
color: #edf0f9;
overflow: hidden;
}
blockquote img {
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
position: absolute;
top: 0;
right: 1rem;
z-index: 2;
}
blockquote .name-block {
padding: 0.1rem 2rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 2rem;
right: 5rem;
z-index: 1;
}
blockquote .pos-block {
padding: 0.1rem 3rem 0.1rem 0.5rem;
background-color: #6e7480;
font-size: 0.8rem;
position: absolute;
top: 3.6rem;
right: 4rem;
z-index: 1;
}
blockquote .txt-block {
background-color: #2b2d32;
padding: 5rem 1rem 1rem 1.8rem;
position: absolute;
top: 1.5rem;
right: 0;
}
blockquote .txt-block:before {
content: '';
position: absolute;
left: 1rem;
top: 4.5rem;
border-left: 2px solid #6e7480;
height: calc(100% - 5rem);
}

<blockquote>
<img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
<span class="name-block">John Doe</span>
<span class="pos-block">A mannager</span>
<div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
</div>
</blockquote>





I set the
blockquote
element position to
relative
and set the child of its to
absolute
and when the the
overflow
of the parent set to
hidden
the height of
blockquote
automatically set to 0 and the content just show when
overflow: visible
or height strictly set.

Answer

When you position an element absolute, it is taken out of the normal flow and so blockquote (which is your parent relative element) will have zero height.

Now if if you use overflow: hidden on blockquote, it will hide everything.

So the best option is to put something on the normal flow and that would be txt-block - remove absolute positioning and give a margin-top to get the desired effect - see demo below:

blockquote {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #edf0f9;
  overflow: hidden;
}
blockquote img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 2;
}
blockquote .name-block {
  padding: 0.1rem 2rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 2rem;
  right: 5rem;
  z-index: 1;
}
blockquote .pos-block {
  padding: 0.1rem 3rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 3.6rem;
  right: 4rem;
  z-index: 1;
}
blockquote .txt-block {
  background-color: #2b2d32;
  padding: 5rem 1rem 1rem 1.8rem;
  margin-top: 1.5rem;
}
blockquote .txt-block:before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 4.5rem;
  border-left: 1px solid #6e7480;
  height: calc(100% - 5rem);
}
<blockquote>
  <img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
  <span class="name-block">John Doe</span>
  <span class="pos-block">A mannager</span>
  <div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
    incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
    voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
    vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
    Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
  </div>
</blockquote>

Let me know your thoughts on this, thanks!

Comments