Why do my span box changes shape on mobile view - html

Question

You can see in the picture below, it displays normally on desktop, but changes on a mobile view.
I created this box with a span and added some objects in it, but I noticed, and don't know why it will show properly on PC and changes shape on Mobile even after setting the overflow-x to scroll. Someone help me with this please.
See the image here.
This is the html code:
```
<div>
<div class="suggestion_container">
<span class="suggestion-box">
<img class="sug-img" src="images/legion.png">
<h1 class="sug-name">Legion Network</h1>
<h2 class="sug-price">800,000</h2>
</span>
<span class="suggestion-box">
<img class="sug-img" src="images/holo.png">
<h1 class="sug-name">Holo</h1>
<h2 class="sug-price">800,000</h2>
</span>
<span class="suggestion-box">
<img class="sug-img" src="images/safepal.png">
<h1 class="sug-name">SafePal</h1>
<h2 class="sug-price">1,500,000</h2>
</span>
<span class="suggestion-box">
<img class="sug-img" src="images/kava.png">
<h1 class="sug-name">Kava</h1>
<h2 class="sug-price">1,500,000</h2>
</span>
<span class="suggestion-box">
<img class="sug-img" src="images/compound.png">
<h1 class="sug-name">Compound</h1>
<h2 class="sug-price">1,500,000</h2>
</span>
</div>
</div>```
This is the css style:
.sug-img {
padding: 6px 0px 0px 6px;
width: 40px;
height: 40px;
}
.sug-name {
font-size: 18px;
margin-top: 50px;
position: absolute;
left: 6px;
}
.sug-price {
font-size: 18px;
margin-top: 75px;
position: absolute;
left: 6px;
}
.suggestion-box {
position: relative;
height: 100px;
width: 152px;
background-color: white;
margin-right: 12px;
border-radius: 10px;
display: flex;
border: 1px solid;
}
.suggestion_container {
display: flex;
padding-top: 70px;
margin: -70px 20px 0px 20px;
overflow-x: scroll;
white-space: nowrap;
}

Answer 1

The width CSS attribute is overridden for items inside a display:flex container.
You can either:
add a min-width: 150px to .suggestion-box, this will ensure that the item's width can get shrunk, but never below 150px
add flex-shrink: 0 and flex-basis: 150px to .suggestion-box which will render the items at 150px to begin width, but will never shrink below that value, only grow.
Both approaches will end up with the same result.
.suggestion-box {
position: relative;
height: 100px;
flex: 1 0 150px;
background-color: white;
margin-right: 12px;
border-radius: 10px;
display: flex;
border: 1px solid;
}