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

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  style="width:100%;">
   <div  style="width:200px">
       Menu Left
   </div>
   <div >
      Hello world
   </div>
</div>

The scrollable div working code:

  <div  style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></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.

CodePudding user response：

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  style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</div>

<div  style="width:100%;">
   <div  style="width:200px">
       Menu Left
   </div>
   <div >
      Hello world
   </div>
</div>

<div  style="width:100%;">
   <div  style="width:200px">
       Menu Left
   </div>
   <div >
      <div  style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
  </div>
</div>

CodePudding user response：

Thanks to the WizardCoder solution I have noticed by chance that we can put the table-layout:fixed inside the table cell div where we want the long div with a scrollbar:

     <div  style="table-layout: fixed;width:100%;">  
        <div  style="white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
...
        </div>
      </div>

https://jsfiddle.net/LondonUK371/a6cm9xs5/

This can be useful if we can't figure out why the table-layout:fixed at the top d-table div is not enough.