CSS Flexbox最大宽度不受尊重

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

当视口宽度为500px时，

td.td较小者

和

td.td较大者

会打断其父容器的宽度

.table响应{overflow-x:hidden；}
.table响应tr{display:inline flex；justify content:space between；border collapse:separate；}
.table响应td.td-更小{flex:38%；最大宽度：38%；}
.表响应td.td-GARGER{flex:58%；最大宽度：58%；}
.表格响应img{边框半径：10px；最大宽度：100%；高度：自动；}
.表响应p{宽度：500px；最大宽度：100%；}
@介质（最大宽度：991px）{
.table响应td.td-更小{flex:48%；最大宽度：48%；}
.table响应td.td-更大{flex:48%；最大宽度：48%；}
}
@介质（最大宽度：767px）{
.table响应tr{display:inline flex；flex wrap:wrap；}
.表响应td.td-更小{flex:98%；最大宽度：98%；}
.表响应td.td-GARGER{flex:98%；最大宽度：98%；}
}

40+五星级评论和；计数

“保罗和他的团队在创造我们梦寐以求的浴室方面提供了卓越的服务。”

-乌皮卡埃迪里辛格酒店

我认为这是flex的一个问题，如果您想更轻松地将

flex:98%

更改为

width:98%

。如果这不起作用，请添加

！重要信息

代码的属性。像这样

flex: 98% !important

---

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

问题在于，表行上的

显示：inline flex

在表布局中没有任何效果。表有自己独特的布局算法，这将搞乱它们内部正常工作的各种CSS

要使布局正常工作，不仅要更改表行的显示方法，还要更改表体和表本身的显示方法，因为它们仍在强制进行表布局。将它们更改为

display:block

将允许表行的

display:inline flex

工作。你可以在这里看到：

.table响应{overflow-x:hidden；}
.table响应tr{display:inline flex；justify content:space between；border collapse:separate；}
.table响应td.td-更小{flex:38%；最大宽度：38%；}
.表响应td.td-GARGER{flex:58%；最大宽度：58%；}
.表格响应img{边框半径：10px；最大宽度：100%；高度：自动；}
.表响应p{宽度：500px；最大宽度：100%；}
@介质（最大宽度：991px）{
.table响应td.td-更小{flex:48%；最大宽度：48%；}
.table响应td.td-更大{flex:48%；最大宽度：48%；}
}
@介质（最大宽度：767px）{
.table响应tr{display:inline flex；flex wrap:wrap；}
.表响应td.td-更小{flex:98%；最大宽度：98%；}
.表响应td.td-GARGER{flex:98%；最大宽度：98%；}
.table responsive.table responsive tbody{display:block}；/*您能显示问题所在的图像吗？这似乎可以正常工作，直到您达到~188px的视口宽度。@SRDMH我能知道使用
table
的原因吗。