I’m trying to create a scrollable table in an HTML layout. The table should take up the remaining height of the container, and only the table should scroll vertically if the content exceeds the available space. The rest of the layout (header, sidebar) should remain fixed.
Requirement:
- The table should automatically adjust its height to fill the remaining space inside the parent container.
- Only the table should scroll when the content is too large.
- No fixed height should be set manually.
- No Javascript
- Pure CSS, Flexbox or Tailwind
What I’ve tried so far:
I’ve used overflow-y: auto on the table container, but either the whole page scrolls or the table doesn’t fill the available space properly.
Here’s my current code:
<html>
<head>
<title>Learning Flexbox</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.sidebar {
width: 250px;
background-color: #c4adf0;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.header {
display: flex;
padding: 10px;
justify-content: space-between;
border-bottom: 1px solid #c8c8c8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.searchbox input {
border: 1px solid #c8c8c8;
padding: 10px;
}
.avatar {
border-radius: 50%;
width: 40px;
height: 40px;
background-color: #f0c4ad;
}
.content {
margin-top: 10px;
padding: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.table-container {
overflow-y: auto;
max-height: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="main">
<div class="header">
<div class="searchbox"><input type="text" /></div>
<div class="avatar"></div>
</div>
<div class="content">
<div>
<h1>Title</h1>
</div>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Consectetur adipiscing elit</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Consectetur adipiscing elit</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
You can give the table container a max-height of 100% while giving the table itself a min-height of 100% and everything except the table is not allowed to scroll.
<html>
<head>
<title>Learning Flexbox</title>
<style>
* {
overflow: hidden;
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.sidebar {
width: 250px;
background-color: #c4adf0;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.header {
display: flex;
padding: 10px;
justify-content: space-between;
border-bottom: 1px solid #c8c8c8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.searchbox input {
border: 1px solid #c8c8c8;
padding: 10px;
}
.avatar {
border-radius: 50%;
width: 40px;
height: 40px;
background-color: #f0c4ad;
}
.content {
margin-top: 10px;
padding: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.table-container {
overflow-y: auto;
max-height: 100%;
height: 100%;
}
table {
width: 100%;
border-collapse: collapse;
min-height: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="main">
<div class="header">
<div class="searchbox"><input type="text" /></div>
<div class="avatar"></div>
</div>
<div class="content">
<div>
<h1>Title</h1>
</div>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Consectetur adipiscing elit</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Consectetur adipiscing elit</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
<tr>
<td>3</td>
<td>Mike Jones</td>
<td>Sed do eiusmod tempor incididunt</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>