Can't get a scrollable div in a div table / cell bootstrap structure

June 11, 2022

I use Bootstrap 4 and I can’t make a scrollable div inside a structure where 2 divs are side by side, the right div has a fixed width and the second div to the right take all the left space responsively.

The working code:

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

The scrollable div working code:

  <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
  </div>

But If I place the scrollable div inside the Hello world d-table-cell div, it just does not work. overflow-x: auto has no effect.

I have done a jsfiddle (just remove display:none !important; from the second d-table div):
https://jsfiddle.net/LondonUK371/zdcjfmv6/8/

How to do that, a scrollable div where "Hello world" is? It can be either with or without Bootstrap.

>Solution :

Add the style table-layout: fixed to the div with the .d-table class. This will prevent the table cell effecting the overall width of the table.

https://jsfiddle.net/WizardCoder/6gmryqca/6/

Table Layout Fixed
Sets a fixed table layout algorithm. The table and column widths are
set by the widths of table and col or by the width of the first row of
cells. Cells in other rows do not affect column widths. If no widths
are present on the first row, the column widths are divided equally
across the table, regardless of content inside the cells

CSS

.cell {
  width:300px;
  background: red;
  height: 100px;
}

.table-layout-fixed {
  table-layout: fixed;
}

HTML

<div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
</div>

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

<div class="d-table mt-3 table-layout-fixed" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cel bg-success">
      <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
      </div>
  </div>
</div>