Flexbox not being responsive

Question

I have three columns of text that I want positioned next to each other in a row. I used flex box to do this but when I shrink the browser to a certain point they just disappear instead of shrinking? I tried setting them to flex-shrink: 1; but it wasn't working either. Im fairly new to this so any help would be appreciated.

.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>

Michael Benjamin · Answer 1 · 2018-10-02T01:31:34.787

When the browser window is very narrow the text disappears because you have flex items set to min-width: 0, which allows them to shrink to, well, zero width. Remove that rule. Or replace it with min-width: auto (the default setting), which prevents items from shrinking below their content size.

.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

More details here: Why don't flex items shrink past content size?

exactly. Another helpful tip, you should always have widths on flex items (even if that width is 100%). Flex is relative. If you need a range, use min-width or max-width. I wish min-content had more support, hopefully soon. — , Oct 02 '18 at 01:29

Flexbox not being responsive

1 Answers1

jsFiddle demo