I am facing an issue where the background color of a wrapper does not adjust to the overflowing content within it. How can I make sure that the background stretches behind all the content, regardless of its size?
<div style="background-color: black;min-height: 10px;">
<div style="width: 100px;">
<div style="background-color: red;min-height: 5px;min-width: 10000px;" />
</div>
</div>The problem lies in the fact that the black background only covers the viewport width and not the actual page width. I have tried using display: inline-block; and display: table but none of them seem to solve the issue due to the fixed width middle layer.
Keep in mind that the inner wrapper is isolated and cannot be manipulated by the outer wrapper to change the display property for each child element. Is there a better way to handle this situation?
Currently, my viewport meta content includes
width=device-width,initial-scale=1.0,maximum-scale=1.0