CSS Flexbox 最大宽度不被尊重

Question

使用 Flexbox，在移动设备上，其父容器的宽度/最大宽度不会受到尊重。

@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%;} 
}

td.td-smaller & td.td-larger 在视口宽度为 500 像素时打破其父容器的宽度。

.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>

这就是in development的样子：

Answer 1

问题是您在表格行上的display: inline-flex 在表格布局中的影响为零。表格有自己独特的布局算法，会弄乱里面的各种 CSS，否则这些 CSS 本来可以正常工作。

要使您的布局正常工作，您不仅要更改表格行，还要更改表格主体和表格本身的display 方法，因为它们仍在强制表格布局。将它们更改为display: block 将允许表格行的display: inline-flex 工作。你可以在这里看到：

.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>

不过，您可以看到，这并不能完全解决所有显示问题。例如，当孩子们停止溢出他们的父母时，图像并不完全正确。请注意，其右侧的角不是圆角的。

您应该解决根本问题，而不是解决 CSS 的每一个小问题，即您将 table 用于布局目的，而不是因为在这种情况下它是实际正确的语义元素。如果其中的内容实际上不是表格数据，则不应使用table；相反，使用语义正确的东西，然后使用 CSS 相应地调整布局。

下面，我对 HTML 进行了最简单的更改，即将所有与表格相关的标签替换为 div。因为div 默认情况下已经使用普通块显示，因此该更改修复了移动设备上的所有显示问题，而无需任何其他样式。显然，它会破坏您的桌面布局。您将需要添加新的 CSS 以允许在桌面上进行正确的布局，因为表格不适合您。这超出了这个问题的范围，所以我把它留给你。

不过，在您这样做时，请考虑适当的（即语义）HTML 应该是什么。例如，也许我在下面的divs 之一应该是section。

.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

我认为这是flex的问题，如果您想更轻松地将flex: 98%更改为width: 98%。如果这不起作用，请将!important 属性添加到您的代码中。像这样

flex: 98% !important

这对我有用，希望它对你有用。谢谢