Tips for creating line breaks using flex-shrink in CSS?

Question

Currently, I am in the process of creating a chat-like system and have been using this sample as a reference:

One adjustment I made was replacing

<input type="text">

with <textarea> since messages often consist of multiple lines.

However, I encountered an issue when trying to display messages with line breaks. Could it be related to the use of flex-shrink?

For instance, after inputting the following text into the textarea:

Hello
    World

The displayed message appeared without proper line breaks:

Hello World

My expectation is for the displayed message to maintain the same line breaks as seen in the textarea input:

Hello
    World

I attempted to address this by adding the following styles to

<div class="flex-shrink-1 bg-light rounded py-2 px-3 mr-3">

:

white-space: pre-wrap;
word-wrap: break-word;

Despite these adjustments, the message's display did not reflect the intended line breaks.

If you could provide any insights on how to resolve this line-breaking issue, it would be greatly appreciated.

-------------------------------------------ps

In my exploration, removing flex-shrink yielded no change in the displayed message, which remained as follows:

Hello World

Furthermore, eliminating flex-shrink and incorporating

white-space: pre-wrap; word-wrap: break-word;

resulted in an oddly formatted message:

                                            Hello
World

At this point, I am unsure what may be causing this issue.

For your reference, here is the HTML & CSS source:

Answer 1

Answer №1

Experiment with flex-shrink property in your CSS stylesheet as shown below

flex-shrink: 5;

Feel free to change the value to suit your needs

Answer 2

Experiment with flex-shrink property in your CSS stylesheet as shown below

flex-shrink: 5;

Feel free to change the value to suit your needs