Div используя оставшуюся ширину

Question

Я использую SmartAdmin. У меня есть виджет, который использует левые вкладки. С правой стороны я пытаюсь, чтобы таблица DataTables занимала 100% оставшейся ширины. В настоящее время таблица занимает 100% ширину родительского div и находится ниже левых вкладок.

SmartAdmin: http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/#ajax/dashboard.html

Как это выглядит: http://imgur.com/rl8SiUI

Как я хочу, чтобы это выглядело: http://imgur.com/DkG1S92

JSFiddle: http://jsfiddle.net/xq9mpom6/

Must 
Enter 
Code 
For JSFiddle Link 

Answer 1

Вы можете использовать дисплей: стол для родителей , и дисплей: table-cell для детей, например:

.widget-body { 
    display: table; 
    width: 100%; 
} 

.widget-body .tabs-left { 
    display: table-cell; 
} 

.widget-body .dataTables_wrapper { 
    display: table-cell; 
    vertical-align: top; 
} 

Обновлена ​​JS скрипка:

http://jsfiddle.net/xq9mpom6/2/

Answer 2

Это выглядит довольно вырезать и сухие случае необходимости несколько столбцов в области. Для чистых CSS-решений у вас есть множество опций.

Учитывая следующую разметку:

<div class='wrapper'> 
    <div class='tabs-left'> 
     [...] 
    </div> 
    <div class='data-table'> 
     [...] 
    </div> 
</div> 

в процентах ширины с поплавками:

.tabs-left { 
    width: 10%; 
    min-width: 200px; 
    float: left; 
} 
.data-table { 
    width: 90%; 
    min-width: 720px; // Arbitrary width. Should min-width of parent minus min-width of the left tabs 
    float: left; 
} 

Фиксированные и процент ширины с поплавками:

.tabs-left { 
    width: 200px; 
    float: left; 
} 
.data-table { 
    width: calc(100% - 200px); 
    min-width: 720px; 
    float: left; 
} 

Flexbox (нужно будет поставщика префиксов):

.wrapper { 
    display: flex; 
    flex-flow: row; 
} 
.tabs-left { 
    width: 200px; 
} 
.data-table { 
    flex-grow 1 
} 

Демонстрационный стол:

.wrapper { 
    display: table; 
    width: 100%; 
} 
.tabs-left { 
    display: table-cell; 
    width: 200px; 
} 
.data-table { 
    display: table-cell; 
}