My webpage has a text box that displays text content. The text box is set with a maximum height and overflow property of auto for scrollability. Now, I want to add a checkbox at the bottom right corner of this text box. To achieve this, I have positioned the checkbox absolutely at the bottom right, which works as intended:
https://i.sstatic.net/8gsSU.png
Here's my question: Can I make the text content wrap around the checkbox so that it doesn't get hidden by the checkbox?
This needs to be achieved without the checkbox moving when the text is scrolled, and it should visually stay within the boundaries of the text box.
I've tried using flex layout and grid layout techniques, but they either resulted in the checkbox moving during scrolling or taking up additional space outside of the text box, which is not desirable.
There is a related question that provides a solution for non-scrollable text, suggesting the use of an invisible spacer to break the text. However, this approach doesn't work here because the spacer location would need to vary based on scrolling position.
You can find my current version where the text extends below the checkbox (undesired behavior) in this fiddle:
.text {
white-space: pre-wrap;
max-height: 8em;
overflow-y: auto;
}
.read {
display: inline;
padding: 8px;
position: absolute;
bottom: -2px;
right: 36px;
background: white;
border: 1px solid black;
}
.wrapper {
position: relative;
}<div class="wrapper">
<div class="text">
Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World Hello
World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
World
</div>
<div class="read" id="read">
<input type="checkbox">
<label for="read">Read</label>
</div>
</div>