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 >
    <div >lorem100</div>
    <div >lorem100</div>
    <div >lorem100</div>
    <div >lorem100</div>
</div>

This is my css:

.slider {
    display: flex;
    overflow: hidden;
}

.item {
    height: 150px;
}

I have:

I want:

Update How it works now

CodePudding user response：

Use flex: 1 0 50%; for your child items

.slider {
  display: flex;
  width: 300px;      /* just for this demo */
  margin: 0 auto;    /* just for this demo */
  background: gold;  /* just for this demo */
  /* overflow: hidden; /* Uncomment once you understand the demo */
}

.item {
  flex: 1 0 50%;
  outline: 1px solid red;
  height: 150px;
}

<div >
  <div >lorem100</div>
  <div >lorem100</div>
  <div >lorem100</div>
  <div >lorem100</div>
</div>

Example without the CSS comments:

.slider {
  display: flex;
  overflow: hidden;
}

.item {
  flex: 1 0 50%;
  outline: 1px solid red;
  height: 150px;
}

<div >
  <div >lorem 1</div>
  <div >lorem 2</div>
  <div >lorem 3</div>
  <div >lorem 4</div>
</div>

Simple Prev/Next Carousel

To spare you some brain pain,
if you plan to animate your .slider, you should not set the overflow:hidden to it, but to a parent element.
Here's a small example using pure JavaScript:

const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);
const mod = (n, m) => (n % m   m) % m;

ELS(".slider-wrapper").forEach(EL_par => {
  const EL_slider = EL(".slider", EL_par);
  const ELS_items = ELS(".item", EL_par);
  const sub =  EL_par.dataset.items ?? 1;
  const tot = Math.ceil(ELS_items.length / sub);
  let c = 0;
  
  const anim = () => EL_slider.style.transform = `translateX(-${c*100}%)`;
  const prev = () => (c = mod(c-1, tot), anim());
  const next = () => (c = mod(c 1, tot), anim());
  
  EL(".prev", EL_par).addEventListener("click", prev);
  EL(".next", EL_par).addEventListener("click", next);
});

/* QuickReset */

* {
  margin: 0;
  box-sizing: border-box;
}

/* Slider */

.slider-wrapper {
  overflow: hidden;
}

.slider {
  position: relative;
  display: flex;
  transition: 0.5s;
}

.item {
  flex: 1 0 50%;
  min-height: 150px;
}

<div  data-items="2">
  <div >
    <div  style="background:#0bf;">Item 1</div>
    <div  style="background:#fb0;">Item 2</div>
    <div  style="background:#f0b;">Item 3</div>
    <div  style="background:#b0f;">Item 4</div>
    <div  style="background:#bf0;">Item 5</div>
    <div  style="background:#0fb;">Item 6</div>
    <!-- Never use inline style. This is just for demo. -->
  </div>
  <button  type="button">&larr;</button>
  <button  type="button">&rarr;</button>
</div>

CodePudding user response：

flex: 1 0 50%;

.slider {
  display: flex;
  overflow-x: scroll;
  border:1px solid black;
}

.item{
  height: 150px;
  flex:1 0 50%;
}


/* background color for the items */
.item_1{
  background:#ff0000;
}
.item_2{
  background:#00ff00;
}
.item_3{
  background:#0000ff;
}
.item_4{
  background:#ffff00;
}

<div >
    <div >lorem100</div>
    <div >lorem100</div>
    <div >lorem100</div>
    <div >lorem100</div>
</div>