Check out this JSFiddle link.
I need the <div> containing "Hi!" to always be positioned at the bottom/right corner of its parent element. It should remain fixed in that position and not scroll along with the rest of the content.
Here's the HTML structure:
<table>
<thead>
<tr>
<th style="width: 90%">Header 1</th>
<th style="width: 10%">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="flex-div">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="sticky-bottom-right">Hi!</div>
</div>
</td>
<td>more</td>
</tr>
</tbody>
</table>
And here is the CSS styling applied:
table {
table-layout: fixed;
width: 100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#flex-div {
display: flex;
justify-content: space-between;
overflow: auto;
position: relative;
}
.flex-item {
background-color: beige;
border: 1px solid blue;
height: 100px;
padding: 30 px;
text-align: center;
min-width: 200px;
}
.sticky-bottom-right {
font-weight: bold;
position: sticky;
right: 0;
}
I initially attempted using position: fixed, but it only stayed fixed in relation to the entire viewport instead of its parent container.