Here is the code snippet I have:
.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 am hoping to achieve this outcome:
https://i.sstatic.net/C6vKg.png
However, I am currently seeing this result:
https://i.sstatic.net/K3WfD.png
I want each item in .divA to have a width of 50% of .divA.