Three inline div height responsiveness is not working on Firefox [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
On my website I have 3 responsive divs inline, that remain all the same size. I developed it on a 15" MacBook Pro & it works perfectly on Safari, Chrome & Firefox (on Mac). See image below:
But I'm building it for my friend and he keeps telling saying that when he goes to the website on his Microsoft computer the divs wont maintain the same height and look like the following:
I've tried so many different things and especially because I cannot replicate the problem on my MacBook, I'm finding it really hard to root out the problem. What is going wrong here?
.flexbox {
display: flex;
}
.trip {
background-color: white;
margin-bottom: 10px;
padding-bottom: 5px;
max-height: 230px;
overflow-x: scroll;
white-space: nowrap;
}
<div class="container flexbox" style="width:100%; background-color:#205ba0; padding:30px;">
<div class="col-md-offset-3 col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/rent.png" style="height:100px;">
</div>
<h2 style="font-weight:bold;">Renting? Landlords welcome.</h2>
A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.<br><br>
Find out more >
</div>
<div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/val.png" style="height:100px;">
</div>
<h2 style="font-weight:bold;">Valuation? Sorted quickly.</h2>
Providing some of the most effecient valuations in town, we're here to help you sort out an important step.<br><br>
Find out more >
</div>
<div class="col-md-2" align="center" style="color:white; border:2px solid white; font-size:12px; padding:10px;">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/sale.png" style="height:100px;">
</div>
<h2 style="font-weight:bold;">Selling? Now uncomplicated.</h2>
We aim to make selling easy. Our trained estate agents are constantly available to help.<br><br>
Find out more >
</div>
</div>

Answer 1

o.k - because it is hard to point out your exact problem due to reasons like a change in the runtime environment & a mix of html and css styling while using bootstrap I took the liberty of cleaning your code & making use of the bootstrap grid system ...
iv'e added some elements , removed the flexbox & moved all of your styling to css to make it easier for you to see the separation and for others to help you ...
the result is pretty much the same except that i changed the number of columns that each "box" occupies due to the text flowing out of the div when the boxes take up 3 columns (BTW this also occurred with your previous code on smaller screens) so I encapsulated half of the heading (the statements after the question mark) in smaller heading tags (<h5>) and now it changes the size before it has a chance to overflow ...
now you can keep playing around with the grid system until you reach the desired result ...
HTML:
<div id="maincontainer" class="container-fluid row">
<div id="box1" class="col-md-4 col-sm-4 col-xs-4">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/rent.png" alt="">
</div>
<h3>Renting? <h5>Landlords welcome.</h5></h3>
<p>A swift liason between landlords and tenants as a fair, independeant party, is just one of our services.</p>
<br><br>
Find out more >
</div>
<div id="box2" class="col-md-4 col-sm-4 col-xs-4">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/val.png" alt="">
</div>
<h3>Valuation? <h5>Sorted quickly.</h5></h3>
<p>Providing some of the most effecient valuations in town, we're here to help you sort out an important step.</p><br><br>
Find out more >
</div>
<div id="box3" class="col-md-4 col-sm-4 col-xs-4">
<div class="trip">
<img src="http://localhost/property_abba/wp-content/uploads/2017/05/sale.png" alt="">
</div>
<h3>Selling? <h5>Now uncomplicated.</h5></h3>
<p>We aim to make selling easy. Our trained estate agents are constantly available to help.</p><br><br>
Find out more >
</div>
</div>
CSS:
h2{
font-weight:bold;
}
a{
color:white;
}
img{
height:100px;
}
.trip {
background-color: white;
margin-bottom: 10px;
padding-bottom: 5px;
max-height: 230px;
}
#maincontainer{
background-color:#205ba0;
padding:30px;
text-align:center;
}
#box1 , #box2 , #box3{
color:white;
border:2px solid white;
font-size:12px;
padding:10px;
}
CodePen