how to set width for item inside flex overflown [duplicate] - css

Question

This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
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

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