I have a container (position: relative
) with limited height (in my HTML it’s limited by a flex box so I actually don’t have the 200px
as in the below code shows). It has the content that determines its width and height. Above the content, I have an absolute
cover with a background to partially cover the content.
However, when the content overflows, and scrollbars appear, the .cover
element does not stretch out. I have tried the following:
width
andheight
to100%
.right
andbottom
to0
.- From another SO answer I cannot find again, I set
min-height: 100%
andbottom: auto
.
None of the above stretch the .cover
to match the content. Is it possible?
p {
width: 2000px; /* Simulating a wide content */
height: 300px;
background: cornflowerblue;
margin: 0;
}
.my-container {
position: relative;
overflow: auto;
height: 200px; /* Simulating limited space */
border: 1px solid red;
}
.my-container .cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: rgba(0,0,0,.8);
/* I have tried each of these: */
/*height: 100%;*/
/*bottom: 0;*/
min-height: 100%;
bottom: auto;
}
.my-container .cover span {
background: white;
padding: 1rem;
margin: 1rem;
}
<div class="my-container">
<div>
<p>Very long text line or very wide image.</p>
</div>
<div class="cover">
<span class="cover-content">Hello</span>
</div>
</div>
2
Answers
Thanks to "pier farrugia"'s comment, I realized I could make a scrolling container separate from the cover parent. So I just need to add another wrapper:
Here is your solution:
Set the display to
inline-block
of all the parents of thatp
tag so that they can get stretched following the child width. It can’t be done with 100% width.