Flex scrollable TABLE

Constraining element into its parent

by roge roge

HTML

<h3>
Flex/Column container constraining a TABLE 
</h3>
<div class="Master">
	<table>
		<thead>
			<tr><td>Head 1</td><td>Head 2 </td><td>Head 3</td></tr>
		</thead>
	</table>
	<div id="TableContainer">
		<table>
			<tbody>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
				<tr><td>bla 1</td><td>bla 2 </td><td>bla 3</td></tr>
			</tbody>
		</table>	</div>
</div>

CSS

.Master {
	display: flex; flex-direction: column;
	padding: 10px;
	background-color: #afa;	
	width: 400px; height: 100px; 
	resize: both; overflow: auto;
}	
#TableContainer {
	padding: 0 2px 0 0; 
	margin-right: auto;
	overflow: auto; // Make the difference
}

Table {
	width: 200px;
	border-collapse: collapse;
	background-color: #bbf;
}
TABLE	tr td {
	border: solid 1px #933;
	padding: 4px 8px;
}

/* scrollbar */ 
::-webkit-scrollbar {
	border-radius: 8px;
	width: 16px;
	background-color: #d9d9d9;
	border: solid 4px #d9d9d9;
	margin-left: 6px;
}
::-webkit-scrollbar-thumb {
	margin-left: 6px;
	border-radius: 8px;
	border: solid 1px #919191;
	background-color: #2d2d2d;
}

/*---  Browser specific ---*/

@-moz-document url-prefix() {
  #TableContainer {
		padding-right: 16px; /* Il faut 14px pour firefox */
  }
}