Flexbox не отвечает

Question

У меня есть три столбца текста, которые я хочу расположить рядом друг с другом в строке.Для этого я использовал flex box, но когда я сжимаю браузер до определенной точки, они просто исчезают, а не сжимаются?Я попытался установить их для flex-shrink: 1;но это тоже не сработало.Я довольно новичок в этом, поэтому любая помощь будет оценена.

.flex-container{
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
  align-items: center;
  height: 350px;
  min-width: 0; 
  
}

.flex-container div { 
  max-width: 200px; 
  min-width: 0;
  font-size: 18px; 
  flex-shrink: 1; 

}

<div class="flex-container">
<div class="reviews-text1">"about 1-2 sentences"
   <p class="reviews-buyername1">-Name</p></div>
<div class="reviews-text2">"about 1-2 sentences"
   <p class="reviews-buyername2">-Name</p></div>
<div class="reviews-text3">"about 1-2 sentences"
   <p class="reviews-buyername3">-Name</p></div>
</div>

          

Answer 1

Когда окно браузера очень узкое, текст исчезает, потому что у вас есть гибкие элементы, установленные на min-width: 0, что позволяет им сжиматься до нуля, ну, в общем, до нулевой ширины.Удалить это правило.Или замените его на min-width: auto (настройка по умолчанию), что предотвращает сжатие элементов ниже размера их содержимого.

.flex-container{
  display: flex; 
  justify-content: space-around; 
  align-items: center;
  height: 350px;
  border: 1px dashed black; /* for demo only */
}

.flex-container div { 
  flex: 0 1 200px;  /* fb: 0, fs: 1, fb: 200px (same as max-width in this case) */
  font-size: 18px; 
  background-color: lightgreen;  /* for demo only */
}

<div class="flex-container">
  <div class="reviews-text1">"about 1-2 sentences"
    <p class="reviews-buyername1">-Name</p>
  </div>
  <div class="reviews-text2">"about 1-2 sentences"
    <p class="reviews-buyername2">-Name</p>
  </div>
  <div class="reviews-text3">"about 1-2 sentences"
    <p class="reviews-buyername3">-Name</p>
  </div>
</div>

jsFiddle demo

Подробнее здесь: Почему гибкие элементы не уменьшаются до размера контента?