I have this code:
<div className="display-flex">
<div className="test-border">
<p className="flex-child">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
</div>
These are the classes definitions:
.display-flex {
display: flex;
}
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.test-border {
border-style: dotted;
}
The problem is the class display-flex makes the text overflow the border:
Adding the class flex-child did not solve this issue. It's as if it doesn't work when I add the class display-flex.
Any idea how to solve this?
NOTE 1:
I noticed this problem only occurs if p element is inside another div. So in this example it can be solved by just removing the parent div of the p element. But, in my project I cannot do that because there are other elements within that div:
<div className="display-flex">
{/* <div className="test-border"> */}
<p className="flex-child">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
{/* </div> */}
</div>
So this is the result:
And that's what I want to achieve but without removing the parent div.
