В гибкой модели элемент с разрывом строки обрезает предыдущий элемент

Question

В гибкой модели длинный текстовый элемент с разрывом строки обрезает предыдущий элемент в строке.Но если текстовый элемент не имеет длинного текста, все хорошо.Что я делаю не так?

.franchisePlaceAverage {
	width: 450px;
	border: 4px solid #93d5ab;
}
.franchisePlaceAverage .row {
	display: flex;
	width: 100%;
  align-items:center;
  margin: 20px 0
}
.franchisePlaceAverage .star{
	width: 20px;
	height: 19px;
	margin: 10px 28px;
	background: tomato;
}
.franchisePlaceAverage .text {
}

<div class="franchisePlaceAverage">
  <div class="row">
	  <div class="star"></div>
		<div class="text">Some long text here Some long text here Some long text here Some long text here </div>
  </div>
	<div class="row">
	  <div class="star"></div>
		<div class="text">Some short text here </div>
	</div>
</div>

Answer 1

Flexbox пытается вместить весь ваш контент и поэтому сокращает количество элементов первого элемента (.star).Вы можете предотвратить это с помощью flex-shrink:0; или с помощью минимальной ширины элемента.

.franchisePlaceAverage {
	width: 450px;
	border: 4px solid #93d5ab;
}
.franchisePlaceAverage .row {
	display: flex;
	width: 100%;
  align-items:center;
  margin: 20px 0
}
.franchisePlaceAverage .star{
	width: 20px;
    flex-shrink:0;/* don't shrink me */
    /* min-width: 20px; would also work */
	height: 19px;
	margin: 10px 28px;
	background: tomato;
}
.franchisePlaceAverage .text {
}

<div class="franchisePlaceAverage">
  <div class="row">
	  <div class="star"></div>
		<div class="text">Some long text here Some long text here Some long text here Some long text here </div>
  </div>
	<div class="row">
	  <div class="star"></div>
		<div class="text">Some short text here </div>
	</div>
</div>