I'm working on styling an HTML element where I want the txt-box div to be centered within its container, overlaying an image while expanding to fill the container. The goal is for it to have a margin of equal width on all sides, creating a border-like effect around the image.
The current HTML structure achieves part of what I need, but I've noticed that the vertical and horizontal margins are slightly off when the browser window is resized.
I suspect that my use of flex-grow may not be entirely accurate. While I know that setting a grow value allows the txt-box to expand as intended since it's the only element with that property, there seems to be issues with achieving consistent margins. Once I figure this out, adding a margin to txt-box should do the trick.
I seem to be missing something crucial about how flex-grow operates. Can you help clarify my understanding?
.container {
display: flex;
align-items: center;
justify-content: center;
border: solid 2px red;
position: relative;
}
.container img {
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.txt-box {
background-color: white;
display: flex;
padding: 5px;
border: solid 2px blue;
flex-grow: 1;
position: absolute;
width: 90%;
height: 80%;
}<div class="container">
<img src="blocks.png" />
<div class="txt-box">
hello world
</div>
</div>