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

Question

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

SmartAdmin: http://192.241.236.31/themes/preview/smartadmin/1.5/ajaxversion/

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

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

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

Must
Enter
Code
For JSFiddle Link

Answer 1

Вы можете использовать display:table для родителя и display: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 Fiddle:

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;
}