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

当视口宽度为 500 像素时，td.td-smaller 和 td.td-larger 会破坏其父容器的宽度。

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

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

在您这样做时，请考虑合适的（即语义）HTML 是什么。例如，我下面的 div 之一应该是 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

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