我有一个带有flexbox div的页面，在第二个flex div中，我有一个表，如果我调整大小，所有元素都适应窗口，桌子有一个水平滚动来移动它。所有这些都在chrome和IE中工作，但是在firefox和MS Edge中，表格打破了窗口的宽度而没有水平滚动。
演示：.url
HTLM
<div id="flexContainer">
<div style="flex-basis: 27%;" id="objetivosContainer" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Objetivos</h3>
</div>
<div class="panel-body">
<div>
<form novalidate="novalidate" id="frmAddObjetivo"><div class="form-group actions"><input id="txtObjetivo" name="txtObjetivo" class="form-control txtInput" placeholder="Nombre del objetivo" type="text"><a id="agregarObjetivo" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></a></div></form>
</div>
<div id="objetivosList"><div class="list-group"><li style="background-color: rgb(238, 238, 238);" class="list-group-item objetivoItemContainer"><div class="objetivoItem" onclick="iniciativasEstrategicas.GetObjetivosInfo(this)"><span>Garantizar sostenibilidad financiera</span></div><div class="objetivoItemButtons"><a id="editObjetivo" onclick="iniciativasEstrategicas.EditObjetivo(this);"><span class="glyphicon glyphicon-edit"></span></a><a id="deleteObjetivo" onclick="iniciativasEstrategicas.DeleteObjetivo(this);"><span class="glyphicon glyphicon-trash"></span></a></div><span class="hdnIdObjetivo" style="display:none">1</span></li><li style="background-color: rgb(255, 255, 255);" class="list-group-item objetivoItemContainer"><div class="objetivoItem" onclick="iniciativasEstrategicas.GetObjetivosInfo(this)"><span>Garantizar el servicio óptimo a nuestros clientes</span></div><div class="objetivoItemButtons"><a id="editObjetivo" onclick="iniciativasEstrategicas.EditObjetivo(this);"><span class="glyphicon glyphicon-edit"></span></a><a id="deleteObjetivo" onclick="iniciativasEstrategicas.DeleteObjetivo(this);"><span class="glyphicon glyphicon-trash"></span></a></div><span class="hdnIdObjetivo" style="display:none">2</span></li><li style="background-color: rgb(255, 255, 255);" class="list-group-item objetivoItemContainer"><div class="objetivoItem" onclick="iniciativasEstrategicas.GetObjetivosInfo(this)"><span>Garantizar crecimiento de nuestros clientes</span></div><div class="objetivoItemButtons"><a id="editObjetivo" onclick="iniciativasEstrategicas.EditObjetivo(this);"><span class="glyphicon glyphicon-edit"></span></a><a id="deleteObjetivo" onclick="iniciativasEstrategicas.DeleteObjetivo(this);"><span class="glyphicon glyphicon-trash"></span></a></div><span class="hdnIdObjetivo" style="display:none">3</span></li></div></div>
</div>
</div>
<div style="display: block;" id="divPestanasObjetivos">
<ul id="pestanasObjetivos" class="nav nav-tabs">
<li class="active"><a id="dashboard" href="#tab_dashboard" data-toggle="tab" onclick="iniciativasEstrategicas.GetObjetivosInfo('cache')">Dashboard</a></li>
<li><a id="iniciativas" href="#tab_iniciativas" data-toggle="tab" onclick="iniciativasEstrategicas.GetIniciativas()">Iniciativas</a></li>
</ul>
<div style="" id="pestanasObjetivosContent" class="tab-content">
<div style="" class="tab-pane dashboard fade in active" id="tab_dashboard">
<ul class="nav nav-tabs">
<li class=""><a aria-expanded="false" id="iniciativasPorcentaje" href="#tab_iniciativasPorcentaje" data-toggle="tab" onclick="iniciativasEstrategicas.GetIniciativasPorcentaje()">Iniciativas</a></li>
<li><a id="iniciativasFases" href="#tab_iniciativasFases" data-toggle="tab" onclick="iniciativasEstrategicas.GetiniciativasFases()">Iniciativas Fases</a></li>
<li class="active"><a aria-expanded="true" id="iniciativasTiempos" href="#tab_iniciativasTiempos" data-toggle="tab" onclick="iniciativasEstrategicas.GetVistaEjecucionPendientes('Iniciativas')">Vista Ejecución Pendientes</a></li>
<li><a id="vistaActividades" href="#tab_vistaActividades" data-toggle="tab" onclick="iniciativasEstrategicas.GetVistaActividades('A tiempo')">Vista Actividades</a></li>
<li><a id="presupuestos" href="#tab_presupuestos" data-toggle="tab" onclick="iniciativasEstrategicas.GetPresupuestosPorcentaje('Valores')">Presupuestos</a></li>
</ul>
<div class="tab-content pestanasDashboardContent">
<div class="tab-pane iniciativasPorcentaje fade" id="tab_iniciativasPorcentaje"><br><br><div class="table-responsive"><table class="table"><thead><tr><th>Iniciativas</th><th>Porcentaje</th></tr></thead><tbody><tr><td><a onclick="iniciativasEstrategicas.GetFasesPorcentaje(this)">Empresa Capa Tech S.A.S y Vinculo S.A.</a></td><td><span style="display: none;" class="donut" data-peity="{ "fill": ["yellow", "#eeeeee"], "innerRadius": 6, "radius": 12 }">62.50/100</span><svg width="24" height="24" class="peity"><path fill="yellow" d="M 12 0 A 12 12 0 1 1 3.5147186257614305 20.48528137423857 L 7.757359312880715 16.242640687119284 A 6 6 0 1 0 12 6"></path><path fill="#eeeeee" d="M 3.5147186257614305 20.48528137423857 A 12 12 0 0 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 0 0 7.757359312880715 16.242640687119284"></path></svg><span class="percentage">62.50%</span></td></tr><tr><td><a onclick="iniciativasEstrategicas.GetFasesPorcentaje(this)">Proyecto de Actualización Tecnológica</a></td><td><span style="display: none;" class="donut" data-peity="{ "fill": ["red", "#eeeeee"], "innerRadius": 6, "radius": 12 }">20.00/100</span><svg width="24" height="24" class="peity"><path fill="red" d="M 12 0 A 12 12 0 0 1 23.412678195541844 8.29179606750063 L 17.706339097770922 10.145898033750315 A 6 6 0 0 0 12 6"></path><path fill="#eeeeee" d="M 23.412678195541844 8.29179606750063 A 12 12 0 1 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 1 0 17.706339097770922 10.145898033750315"></path></svg><span class="percentage">20.00%</span></td></tr><tr><td><a onclick="iniciativasEstrategicas.GetFasesPorcentaje(this)">Definición de modelos de costeo</a></td><td><span style="display: none;" class="donut" data-peity="{ "fill": ["red", "#eeeeee"], "innerRadius": 6, "radius": 12 }">12.50/100</span><svg width="24" height="24" class="peity"><path fill="red" d="M 12 0 A 12 12 0 0 1 20.48528137423857 3.5147186257614305 L 16.242640687119284 7.757359312880715 A 6 6 0 0 0 12 6"></path><path fill="#eeeeee" d="M 20.48528137423857 3.5147186257614305 A 12 12 0 1 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 1 0 16.242640687119284 7.757359312880715"></path></svg><span class="percentage">12.50%</span></td></tr></tbody></table></div></div>
<div class="tab-pane presupuestos fade" id="tab_iniciativasFases">
</div>
<div class="tab-pane iniciativasFases fade active in" id="tab_iniciativasTiempos"><br><br><div><div><div class="btn-group" role="group" aria-label="Basic example"><button type="button" id="btnVistaIniciativas" class="btn btn-default active" onclick="iniciativasEstrategicas.GetVistaEjecucionPendientes('Iniciativas')">Iniciativas</button><button type="button" id="btnVistaResponsables" class="btn btn-default" onclick="iniciativasEstrategicas.GetVistaEjecucionPendientes('Responsables')">Responsables</button></div></div><div class="table-responsive divTableVistaEjecucionPendientes"><table class="table table-bordered tableVistaEjecucionPendientes"><thead><tr><th rowspan="2">Iniciativas</th><th colspan="4">En Ejecución</th><th colspan="4">Pendientes</th></tr><tr><th colspan="2">A tiempo</th><th colspan="2">Desfasadas</th><th colspan="2">A tiempo</th><th colspan="2">Atrasadas</th></tr></thead><tbody><tr><td>Empresa Capa Tech S.A.S y Vinculo S.A.</td><td>0.00%</td><td>0</td><td>100.00%</td><td>2</td><td>0.00%</td><td>0</td><td>0.00%</td><td>0</td></tr><tr><td>Proyecto de Actualización Tecnológica</td><td>50.00%</td><td>1</td><td>50.00%</td><td>1</td><td>0.00%</td><td>0</td><td>100.00%</td><td>3</td></tr><tr><td>Definición de modelos de costeo</td><td>100.00%</td><td>1</td><td>0.00%</td><td>0</td><td>0.00%</td><td>0</td><td>100.00%</td><td>1</td></tr></tbody></table></div></div></div>
<div class="tab-pane iniciativasTiempos fade" id="tab_vistaActividades">
</div>
<div class="tab-pane vistaActividades fade" id="tab_presupuestos">
</div>
</div>
</div>
<div class="tab-pane iniciativas fade" id="tab_iniciativas">
<div id="iniciativasContainer" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Iniciativas</h3>
</div>
<div class="panel-body">
<div>
<form novalidate="novalidate" id="frmAddIniciativa">
</form>
</div>
<div class="panel-group" id="iniciativasList">
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
/*Fix for bootstrap responsive table*/
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
body {
padding: 3px;
overflow: auto !important;
}
/*.table {
text-align: center;
}*/
.table td,
.table th
{
text-align:left;
}
#right,
.table td + td,
.table th + th
{
text-align:center;
}
.table>thead>tr>th {
text-align: center;
vertical-align: middle !important;
}
.tableVistaIniciativasFases td {
min-width: 100px;
}
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
a:link{cursor:pointer !important;}
a:active{cursor:pointer !important;}
a:visited{cursor:pointer !important;}
a:hover{cursor:pointer !important;}
input {
-moz-min-width: 10%;
-ms-min-width: 10%;
-o-min-width: 10%;
-webkit-min-width: 10%;
min-width: 10%;
}
.actions, .panel-heading-iniciativa {
display: -ms-flexbox;
display: flex;
flex-flow: row;
}
.actionsIniciativas {
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.actions > a {
margin: 0 5px 0 5px;
}
#alertIniciativasContainer {
display: none;
width: 100%;
margin: 0 3px 0 0;
}
.has-error {
color: #a94442;
}
.deleteButton {
color: red;
}
.loadImage {
margin-left: 45%;
}
.divTableVistaActividades, .divTableVistaEjecucionPendientes, .divTablePresupuestos {
margin-top: 25px;
}
#breadCrumbContainer {
color: #777777;
font-size: 19px;
margin-left: 9px;
text-transform: uppercase;
}
#breadCrumbContainer > span:last-child {
font-weight: bold;
}
#editObjetivo, #editIniciativa {
color: blue;
}
#editIniciativaTemplate {
margin: 5px;
}
#deleteObjetivo, #cancelUpdateObjetivo, #deleteIniciativa, #cancelUpdateIniciativa {
color: red;
}
#frmEditObjetivo {
width: 100%;
}
#inputPatrocinador, #inputPatrocinadorS {
width: 100%;
}
.idIniciativaValue, #idObjetivoValue, #objetivoValue, #index {
display: none;
}
#divPatrocinador, #divPatrocinadorS, #divLider, #divLiderS {
height: 68px !important;
}
#tab_dashboard {
margin-top: 20px;
padding: 0 8px 0 8px;
}
#updateObjetivo, #updateIniciativa {
color: green;
}
#flexContainer {
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#divPestanasObjetivos {
display: none;
flex: 72%;
order: 2;
}
#patrocinadorPicker, #patrocinadorSPicker {
margin-right: 3%;
}
#objetivosContainer {
order: 1;
-moz-min-width: 168px;
-ms-min-width: 168px;
-o-min-width: 168px;
-webkit-min-width: 168px;
min-width: 168px;
flex:100%;
}
#tab_iniciativasFases {
overflow-x: auto;
}
#txtInput {
width: 80%;
}
.divIniciativa {
flex: 1 100%;
order: 1;
margin-bottom: 10px;
}
.divButtons {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
font-size: 17px;
}
#addIniciativa {
flex: 1 3%;
order: 4;
margin: 0 0 10px 3%;
}
#updateIniciativa, #cancelUpdateIniciativa {
flex: 1 3%;
order: 4;
margin: 0 0 10px 3%;
font-size: 22px;
}
.panel-body {
padding: 10px 4px !important;
}
.peoplepickerContainer {
flex: 1 40%;
order: 3;
}
.cam-peoplepicker-userlookup {
height: 68px !important;
}
.objetivoItemButtons a, .iniciativaItemButtons a {
margin: 7px;
}
.objetivoItemButtons {
flex: 1 20%;
display: flex;
justify-content: flex-end;
}
.objetivoItemContainer {
align-content: center;
align-items: center;
display: -ms-flexbox;
display: flex;
flex-flow: row;
cursor: pointer;
}
.objetivoItemContainer:hover {
background-color: #EEE;
}
.objetivoItem {
flex: 2 70%;
margin: 0;
}
.panel-title-flex {
flex: 2 0;
}
.percentage {
margin-left: 9px;
vertical-align: inherit;
}
.totalValoresPresupuesto {
padding-top: 7px;
}