how to wrap a text child inside a flex column and keep the width of the column fix

Issue

I create a flex row which have 2 column each one have flex:1 which mean the columns will divide the row by 2 parts have equal width

HTML :

<div class="row">
<div class="columnLeft">
  <p>columnLeft</p>
</div>
<div class="columnRight">
  <p>columnRight</p>
</div>

CSS :

.row {
  display: flex;
  flex-direction: row;
 }
.columnLeft {
  flex:1;
  background-color: coral;
  display: flex;
  flex-direction: column;
}
.columnRight {
  flex:1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

the result:

The problem: the problem is when I add text in columnLeft that have width superior that the columnLeft the width of the column follow the width of it's child and broke the role of flex:1 flex:1.

How to fix the width of a column in a row and wrap things inside it?

Solution

Set word-break: break-all for the <p> if it has a long title like you showed in the question

.row {
  display: flex;
  flex-direction: row;
 }
.columnLeft {
  flex:1;
  background-color: coral;
  display: flex;
  flex-direction: column;
}
.columnRight {
  flex:1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

p {word-break: break-all;}

<div class="row">
<div class="columnLeft">
  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="columnRight">
  <p>columnRight</p>
</div>

Answered By - Viira