CSS Flexbox max-width not being respected

Question

Using Flexbox, on mobile the width/max-width is not being respected with respect to their parent container.

@media (max-width: 767px) {
    .table-responsive tr {display: inline-flex; flex-wrap: wrap;}
    .table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
    .table-responsive td.td-larger {flex: 98%; max-width: 98%;} 
}

The td.td-smaller & td.td-larger break the width of their parent container when the viewport width is 500px say.

.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
    .table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
    .table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
    .table-responsive tr {display: inline-flex; flex-wrap: wrap;}
    .table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
    .table-responsive td.td-larger {flex: 98%; max-width: 98%;} 
}

<table class="table-responsive">
<tbody>
<tr>
<td class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></td>
<td class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews &amp; Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></td>
</tr>
</tbody>
</table>

This is what it looks like in development:

Answer 1

The problem is that your display: inline-flex on the table rows has zero effect inside a table layout. Tables have their own unique layout algorithm that will mess up all sorts of CSS inside them that would otherwise normally work.

To get your layout to work, you have to change the display method of not only the table rows but also the table body and the table itself because they are still forcing a table layout. Changing them to display: block will allow the display: inline-flex of the table row to work. You can see that here:

.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
    .table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
    .table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
    .table-responsive tr {display: inline-flex; flex-wrap: wrap;}
    .table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
    .table-responsive td.td-larger {flex: 98%; max-width: 98%;}
    .table-responsive, .table-responsive tbody { display: block }; /* <-- this is the fix */
}

<table class="table-responsive">
<tbody>
<tr>
<td class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></td>
<td class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews &amp; Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></td>
</tr>
</tbody>
</table>

You can see, though, that that doesn't fully fix all the display problems. For example, while the children stop overflowing their parent, the image isn't quite right still. Notice that its corners aren't rounded on its right side.

Rather than fixing every little issue with CSS, you should address the root problem, which is that you are using a table for layout purposes instead of because it is the actual correct semantic element in this case. You shouldn't use a table if the content inside it isn't actually tabular data; instead, use something that is semantically correct and then use CSS to adjust the layout accordingly.

Below, I've made the simplest change possible to the HTML, which is to just replace all the table-related tags will div. Because div uses a normal block display by default already, that change fixes all the display issues on mobile without the need for any additional styles. Obviously, though, it's going to break your desktop layout. You will need to add new CSS that allows for the right layout on desktop now that the table isn't doing it for you. That's outside the scope of this question, so I'll leave that to you.

While you are doing so, though, consider what the appropriate—i.e., semantic—HTML would be. Maybe one of the divs I have below should be a section, for example.

.table-responsive {overflow-x: hidden;}
.table-responsive tr {display: inline-flex; justify-content: space-between; border-collapse: separate;}
.table-responsive td.td-smaller {flex: 38%; max-width: 38%;}
.table-responsive td.td-larger {flex: 58%; max-width: 58%;}
.table-responsive img {border-radius: 10px; max-width: 100%; height: auto;}
.table-responsive p {width: 500px; max-width: 100%;}
@media (max-width: 991px) {
    .table-responsive td.td-smaller {flex: 48%; max-width: 48%;}
    .table-responsive td.td-larger {flex: 48%; max-width: 48%;}
}
@media (max-width: 767px) {
    .table-responsive tr {display: inline-flex; flex-wrap: wrap;}
    .table-responsive td.td-smaller {flex: 98%; max-width: 98%;}
    .table-responsive td.td-larger {flex: 98%; max-width: 98%;}
}

<div class="table-responsive">
<div>
<div>
<div class="td-smaller"><img loading="lazy" class="alignleft size-full wp-image-230 border-radius" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/dark-bathrooms-Brisbane.jpg" alt="dark bathrooms Brisbane" width="1200" height="800" sizes="(max-width: 1200px) 100vw, 1200px"></div>
<div class="td-larger">
<h2 class="bottom-border-left">40+ 5-Star Reviews &amp; Counting</h2>
<p><img loading="lazy" class="size-full wp-image-231 alignnone" src="//herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/5-stars.png" alt="5 star review" width="142" height="25"></p>
<p>“Absolutely brilliant service by Paul and the team in creating our dream bathrooms.”</p>
<p>—Upekha Edirisinghe</p>
<p><a class="btn btn-black" href="#">More Reviews</a></p></div>
</div>
</div>
</div>

Answer 2

I think this is a problem of flex, If you want to do it more easily change flex: 98% into width: 98%. If this didn't work, add !important attribute to your code. Like this

flex: 98% !important

This worked for me, Hope it works for you. Thanks