I have some basic code that allows for a popup to appear when something is hovered over. Codepen: https://codepen.io/Sean713/pen/GRBpVOZ
<div class="row">
<div class="subdiv">
<p class="hover">Hover</p>
<div class="popup">
<p>Surprise I am a popup</p>
<p> and so am I</p>
</div>
</div>
</div>
.row {
height: 100px;
border: 1px solid red;
display: flex;
}
.subdiv {
border: 1px solid green;
position: relative;
}
.popup {
display: none;
position: absolute;
left: 100px;
border: 1px solid black;
}
.hover:hover + .popup {
display: inline;
}
Since .row
is a flexbox, it makes sense that .subdiv
should compress its width to its content, as I have not specified otherwise.
However, the popup that appears when I hover is having unexpected behavior. The actual text inside the p tags is wrapping and is only as wide as the longest word in the sentence, it seems to be acting almost like .subdiv
. I’m not sure why this is the case or why the fact that .row
being a flexbox is influencing this popup. I would like for the p tags inside the popup to full block and allow the popup to wrap around that.