Block element disappears after horizontal scroll - html

Question

I have code similar to this situation:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div>
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
I have a table with table-layot: auto style, which cells display very large text. Above table are displayed tabs. After horizontal scrolling tabs div is cut.
Is there a possibility to stretch tabs div, depending on table's width?
Relevant image:

Answer 1

A div (or any element with display:block) is only as wide as its container.
So one solution is to put it in a container that is as wide as the table. For instance, an inline-block around the table, which will stretch itself to the correct width.
.div-and-table-wrapper {
display:inline-block;
min-width:100%;
}
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div class="div-and-table-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
(Note: the min-width is in there to ensure that the tabs div will be at least as wide as the window in case the table is narrower.
If you don't want that, i.e. if you want the tabs div to always be the same width as the table, perhaps you're better off turning it into a caption.)

Answer 2

You need to set the width of the parent div to fit-content:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
.tabs-wrapper {
width: fit-content;
}
<div class="tabs-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
An alternative would be, as Mr Lister already suggested, using inline-block instead of fit-content.