This is a weird CSS problem i stumbled on. It only happens in Google Chrome (I tested only Firefox and Google Chrome, and only Google Chrome have this problem).
.product {
display: grid;
grid-template-columns: 35% 65%;
justify-content: center;
align-items: center;
}
.imgcontainer {
display:grid;
grid-template-rows: 75% 25%;
grid-template-columns: 20px 1fr 20px;
grid-row: 1 / span 2;
grid-gap: 5px;
width: 100%;
height: 100%;
}
.imgcontainer.solo .mainimgcontainer {
grid-row: 1 / span 2;
}
.mainimgcontainer {
max-height: 100%;
text-align: center;
grid-column: 1 / span 3;
align-items: center;
justify-content: center;
}
.restimgcontainer {
display: flex;
max-height: 100%;
grid-row: 2;
grid-column: 2;
overflow: hidden;
justify-content: flex-start;
align-items: flex-start;
}
.restimgcontainer img {
display: block;
cursor: pointer;
border: 1px solid gray;
box-sizing: border-box;
object-fit: scale-down;
flex: 0 0 auto;
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.mainimgcontainer img {
cursor: pointer;
max-width: 100%;
max-height: 100%;
}
.centercontainer {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
}
/*below is for styling*/
.productcontainer.noselect {
display: block;
}
.productcontainer.nostock .message {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.productcontainer {
display: grid;
grid-template-columns: 20px 1fr;
}
.productcontainer, .restcontainer {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
background-color: #f9f9f9;
text-align: center;
width: 90%;
max-width: 700px;
padding: 8px;
}
.productcontainer:hover {
border: 1px solid #FE5A1D;
}
.control {
display: table;
height: 100%;
width: 20px;
grid-row: 2;
background-color: gray;
border-radius: 10px;
padding: 30% 25%;
text-align: center;
box-sizing: border-box;
}
.control > div {
display: table-cell;
vertical-align: middle;
text-align:center;
}
.control.left {
border-radius: 5px 0 0 5px;
}
.control.right {
border-radius: 0 5px 5px 0;
grid-column: 3;
}
.product header, footer {
display: flex;
flex-wrap: wrap;
grid-column: 2;
padding: 10px 20px;
}
footer.column {
flex-flow: column;
align-items: flex-start;
}
footer.column .variation {
align-self: flex-end;
}
footer.column .variation.solo {
align-self: flex-start;
}
footer .showprice {
text-align: right;
flex-grow: 1;
align-self: flex-end;
}
.product header {
flex-wrap: wrap-reverse;
}
.product h2, p {
margin: 0 5px;
text-align: left;
}
.product h3 {
margin: 5px;
}
.variation {
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
align-self: flex-start;
}
.variation :nth-child(2n+1){
text-align: right;
}
.variation :nth-child(2n){
text-align: left;
}
.desc {
display: flex;
flex-grow: 1;
flex-flow: column;
align-items: flex-start;
}
.productcontainer.noselect .finalinfo {
text-align: left;
align-self: flex-start;
}
.finalinfo {
text-align: right;
flex-grow: 1;
align-self: flex-end;
}
.toright {
align-self: flex-end;
}<div class="centercontainer">
<div class="productcontainer noselect">
<div class="product">
<div class="imgcontainer">
<div class="mainimgcontainer"><img id="displayimg" src="http://41.media.tumblr.com/eeec8092766317ca3d81c6dc7f2991ed/tumblr_nnqhzk72TO1slhhf0o1_1280.jpg"></div>
<div class="control left" style="display: none;"><div> ❮ </div></div>
<div class="restimgcontainer">
<img id="rest0" src="http://41.media.tumblr.com/eeec8092766317ca3d81c6dc7f2991ed/tumblr_nnqhzk72TO1slhhf0o1_1280.jpg">
</div>
<div class="control right" style="display: none;"><div> ❯ </div></div>
</div>
<header>
<div class="desc">
<h2>Nike Hoodie (Long Sleeve)</h2>
<p>Tan</p>
<h3 id="stock">Stock left: 450</h3>
<h3 id="ppu">Price per unit: RM 139.99</h3>
</div>
</header>
<footer class="column">
<div class="variation solo">
<div>Quantity: </div><input class="setwidth" oninput="updateprice()" id="quan" min="1" max="450" step="1" value="1" name="quantity" type="number">
<div>Color: </div>
<select name="Color" class="setwidth" oninput="updatesel()">
<option value="Black" selected="selected">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
<option value="Red">Red</option>
</select>
<div>Size: </div>
<select name="Size" class="setwidth" oninput="updatesel()">
<option value="XS" selected="selected">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
<option value="3XL">3XL</option>
</select>
</div>
<div class="finalinfo">
<h3 id="totalp">Total price: RM 139.99</h3>
</div>
<input class="toright" value="Add to Cart" type="submit">
</footer>
</div>
</div>
</div>Image below is the expected results and Google Chrome results, the bottom left image container (which is used as image slider) will display a list of images in a row, in Firefox, it display exactly as the expected results.
But in Google Chrome, the results were different, the width is 100% of what its parent width is. Resulting the image sliders only able to show 1 image at a time.
Is this Google Chrome's CSS problem? Is there any workaround?
Some workaround/problems I've found:
If you inspect element and untick and tick the width/height related CSS code in that element, the problem will be gone.
If there is no select element on the right panel, it will have no problem.
