I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with:
<div id="wrapper">
<div id="box">
<div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex</div>
<div class="item">Eu liber libris sit, qui aeque primis an</div>
</div>
</div>
To allow horizontal scrolling when necessary, I have applied overflow: auto to the wrapper:
#wrapper {
overflow: auto;
}
Here is the JSFiddle link for reference:
https://jsfiddle.net/codesmith32/e9se5120/
The main objective is as follows:
- When all list items are shorter in width than the wrapper (no scrolling required), the highlight should expand from left-to-right:
https://i.sstatic.net/xxGrT.png
- However, if the items are long enough to trigger scrolling, the highlight should extend to the length of the longest item, i.e., the full scroll width of the wrapper.
https://i.sstatic.net/aHgsg.png
In the default scenario, case 1 works fine where the highlight stretches across properly without requiring horizontal scrolling. But in case 2, when the items are too long and cause scrolling, the highlight only spans up to the box width, failing to cover the entire items' width as shown below:
https://i.sstatic.net/fIxaJ.png
I attempted setting display: flex on the wrapper, which did make the highlights fit the text width and work correctly for horizontal scrolling scenarios. However, this setup failed for case 1 where no scrolling was needed:
https://i.sstatic.net/N9uD9.png
Another solution I tried was applying min-width: 100% to the #box element, hoping it would enforce a minimum width requirement. Unfortunately, this approach worked for case 1 but not for case 2 despite using display: flex.
Any suggestions or ideas to resolve this?