The html code below properly flexes the top table and displays a vertical scroll bar in Safari and Chrome. However, in Firefox the top table is not flexing. Can someone help me uncover what I am missing?
I have posted a jsfiddle here.
Open the jsfiddle in Chrome or Safari and it works. Open it in Firefox and it does not.
Thanks in advance for all the help.
Below is the code
body {
background-color: #e9e9e9;
height: 100% !important;
font-size: 14px;
margin: 0;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
html {
background: #e9e9e9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html,
body,
.viewport {
width: 100%;
height: 100%;
margin: 0;
}
#master_wrapper {
width: 100%;
height: 100%;
min-width: 1160px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-size: 1em;
display: flex;
flex-direction: column;
flex: auto;
}
#top_wrapper {
height: 70px;
min-width: 885px;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
flex: 0 0 auto;
background-color: #000;
}
.banner_position {
display: inline-block;
background-color: #2483d0;
width: 280px;
height: 70px;
float: left;
}
#window_wrapper {
min-width: 800px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom;
70px;
background-color: #fbfbfb;
padding-bottom: 15px;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-size: 1em;
flex-grow: 1;
}
#bottom-wrapper {
height: 34px;
min-width: 885px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
background-color: #000;
}
:focus {
outline: none;
}
input[type=button] {
width: 150px;
height: 30px;
}
#window_wrapper {
background-color: #ffffff;
display: flex;
flex-direction: column;
}
#wrapper_1 {
min-height: 100px;
width: 100%;
height: 100%;
margin-top: 20px;
text-align: left;
display: flex;
flex-grow: 1;
}
.wrapper_2 {
margin-top: 10px;
margin-bottom: 20px;
padding-right: 25px;
padding-left: 25px;
}
.sub_wrapper_1 {
min-width: 478px;
min-height: 100px;
padding-left: 25px;
padding-right: 25px;
display: flex;
flex-direction: column;
}
.table_1_wrapper {
width: 450px;
min-height: 100px;
text-align: right;
display: flex;
flex-direction: column;
flex-grow: 1;
align-self: center;
}
.table_wrapper {
min-height: 100px;
overflow: auto;
overflow-y: scroll;
flex-grow: 1;
}
.table_header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-height: 18px;
}
.table_header span {} .select_all {
float: left;
padding-left: 2px;
margin-top: 15px;
}
.button_padding {
display: inline-block;
margin-left: 20px;
}
.table_2_header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 100%;
padding-left: 1px;
text-align: left;
}
.table_2_header span {
display: inline-block;
}
.fixed_table_wrapper {
max-height: 103px;
overflow: auto;
width: 100%;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
td {
border-top: 1px solid silver;
}
.table_wrapper td.fixed {
width: 20%;
text-align: center;
}
.table_wrapper td.flex {
width: 74%;
overflow: hidden;
white-space: nowrap;
text-align: left;
}
.table_header_inner {
color: #ffffff;
width: 100%;
text-align: left;
}
.table_2_header_inner {
color: #ffffff;
}<div id="master_wrapper">
<div id="top_wrapper" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-widget ui-widget-content custom-combobox-input ui-widget ui-widget-content">
</div>
<div id="window_wrapper">
<div id="wrapper_1">
<div class="sub_wrapper_1">
<div class="table_1_wrapper">
<div class="table_header ui-widget-header">
<div class="table_header_inner">
<span class="group_cb"> </span><span class="name_header_pos">Title 1</span><span class="member_header_pos">Title 2</span>
</div>
</div>
<div class="table_wrapper">
<table>
<tbody>
<tr>
<td class="flex">r1</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r2</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r3</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r4</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r5</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r6</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r7</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r8</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r9</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r10</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r11</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r12</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r13</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r14</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r15</td>
<td class="fixed">1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="wrapper_2">
<div class="table_2_header ui-widget-header">
<div class="table_header_inner">
<span class="group_cb"> </span><span class="name_header_pos">Title 1</span><span class="member_header_pos">Title 2</span>
</div>
</div>
<div class="fixed_table_wrapper">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="flex">r1</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r2</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r3</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r4</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r5</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r6</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r7</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r8</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r9</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r10</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r11</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r12</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r13</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r14</td>
<td class="fixed">1</td>
</tr>
<tr>
<td class="flex">r15</td>
<td class="fixed">1</td>
</tr>
</tbody>
</table>
</div>
<div class="select_all">
<input type="checkbox" name="select_all" id="select_all" class="select_all_btn">
<label>Select All</label>
<div class="button_padding">
<input type="button" name="delete_sent" id="delete_sent" value="Delete" class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'>
</div>
</div>
</div>
</div>
<div id="bottom-wrapper" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header"></div>
