how to set width for item inside flex overflown

Question

I got code like this

.divA {
  background: red;
  width: 500px;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
}

.epi {
  width: 50%;
  background: blue;
}

<div class="divA">
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
</div>

I'm expecting this

But I'm getting this

I want item in .divA has the width of 50% of .divA

add `flex-shrink:0` to the elements – Temani Afif Aug 21 '19 at 18:48 — Temani Afif, Aug 21 '19 at 18:48

djolf · Answer 1 · 2019-08-22T10:04:43.057

1

Edit: Since you don't want it to wrap, but scroll horizontally, you can put it as overflow-x: scroll;

.divA {
  background: red;
  width: 500px;
  display: flex;
  justify-content: flex-start;
  overflow-x: scroll;
  overflow-y: auto;
}

.epi {
  min-width: 50%;
  background: blue;
}

<div class="divA">
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
  <div class="epi">
    <h1>dsds</h1>
    <p>sdsds</p>
    <img src="img/heart.png" alt="" />
  </div>
</div>

edited Aug 22 '19 at 10:04

answered Aug 21 '19 at 08:35

djolf

1,094
4
18

flex-wrap wil break the down the line. I want all item on the same line. and scrollable horizontally. – angry kiwi Aug 21 '19 at 10:16
I've edited my answer. It should suit your purpose now. – djolf Aug 22 '19 at 10:07

how to set width for item inside flex overflown

1 Answers1