当一个文本 div 更改时，使其他人文本 div 更改大小

Question

我有以下文本div。

.owners{
margin: 0px 20px 0px 20px;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row owners">
<div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
<div class="col-sm-3 text-center" style="background-color:lavenderblush;overflow-wrap:break-word;">Owner</div>
<div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
<div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
</div>

或以下链接：https://codepen.io/Lamdepzai123/pen/RJqPqq

当我编辑文本div 的内容时，文本将环绕，使一个div 更改其大小。我想知道如何让其他三个div 根据该div 更改其大小。

我真的很感激任何帮助。

Answer 1

添加此 css：

.owners{
margin: 0px 20px 0px 20px;
flex-wrap: wrap;
display: flex;
justify-content: center;
}
.text-center{
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

这是更新的代码笔

Answer 2

添加此 CSS ！ 我希望解决了您的问题。

.row{
overflow: hidden; 
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}