0

Hello i have a flex container whose flex-flow is row-wrap and justify-content: center. I have two flex items in container which has min and max widths given.When i resize the window, for smaller screens (may be 525px & below) the content on the left side of flex item is not visible.Why is that happening so? How can i create a responsive layout so that the items are visible in all the resolution.I have a demo here demonstrating the above condition http://codepen.io/abhibly/pen/WxgLjz Somebody please tell me how to do that.

<ul class="flex-container">
<li class="flex-item">1234567</li>
<li class="flex-item">1324444</li>
</ul>

And this is the css i have applied for container and its items

.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
.flex-item {
background: green;
height: 150px;
margin-top: 10px;
line-height: 150px;
max-width:500px;
min-width:450px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
flex:1 1;
border-left:5px solid orange;
}
abhilash reddy
  • 1,546
  • 8
  • 31
  • 53
  • don't forget unprefixed rules at last. You may use min-width on parent container too : http://codepen.io/anon/pen/EyZGLY – G-Cyrillus Aug 03 '16 at 13:11
  • Instead of `justify-content: center` on the flex container, use `margin: 0 auto` on the flex items. [**Revised Codepen**](http://codepen.io/anon/pen/EyZGGa) | [**Explanation**](http://stackoverflow.com/q/33454533/3597276). Or, for better centering on larger screens, you can use `justify-content`, then switch to `auto` margins on smaller screens with a media query. The point is, you'll need `auto` margins to overcome the scroll limitation. It's explained in the dupe. – Michael Benjamin Aug 03 '16 at 13:29

0 Answers0