Text not wrapping correctly in flexbox inside a <div> with overflow hidden
I'm optimizing some code but I've been struggling with this for a few days now and could really use some help... I'm attempting to set up I've searched everywhere and can't find a clear answer. I've searched everywhere and can't find a clear answer. I'm having an scenario with text not wrapping properly within a flexbox layout inside a `<div>` that has `overflow: hidden` set. In my setup, I'm using Bootstrap 5, and I want to ensure that the text within the flexbox properly wraps instead of overflowing the container, but it seems to be ignoring the wrapping behavior. Here’s the relevant HTML and CSS: ```html <div class="container"> <div class="row"> <div class="col-12 d-flex flex-column overflow-hidden" style="height: 100px;"> <div class="flex-grow-1"> <p class="text">This is a long text that should wrap within the constraints of the flex container but is currently overflowing and being cut off.</p> </div> </div> </div> </div> ``` ```css .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` I’ve tried adjusting the `white-space` property to use `normal`, but it still doesn't seem to work as expected. When I check the computed styles, it appears that the `flex-grow` property is causing the container to ignore the wrapping. Additionally, I’ve inspected the box model and it seems that the width is confined correctly according to Bootstrap's grid system, yet the text overflows. Has anyone encountered a similar scenario where text wrapping inside a flexbox does not behave as expected, especially with the overflow property? Any thoughts on how to fix this question would be greatly appreciated! I'm developing on macOS with Html. This issue appeared after updating to Html 3.11. I'm working in a macOS environment. Thanks for taking the time to read this! For context: I'm using Html on Ubuntu 20.04. Any ideas what could be causing this?