Css slider with flex

I have a container with some content based on flex positioning so it is adaptive.And i have silde block which is display:flex.I want to have only 2 items in a row for my slider. Other items should be hidden.I don't know the width of container.

This is my html:

<div class="slider"><div class="item">lorem100</div><div class="item">lorem100</div><div class="item">lorem100</div><div class="item">lorem100</div></div>

This is my css:

.slider {    display: flex;    overflow: hidden;}.item {    height: 150px;}

I have:

I want:

UpdateHow it works now