Maximize CSS table-cell width

Question

On my website I have a CSS table with two table cells. One is 400px wide, and I want the other one to take up the rest of the page. How do I do that? I have tried applying width 100% to it, but that doesn't work on chrome, and width: auto doesn't work at all.

.wrapper{
    display: table;
    width: 100vw;
    max-width: 100vw;
}
[...]
.sidebar{
    display: table-cell;
    border-right: 1px solid #707070;
    width: 400px;
}
[...]
.content{
    display: table-cell;
    width: 100%;
}

HTML:

<div class="wrapper">
    <div class="sidebar">
        <!-- Stuff -->
    </div>
    <div class="content">
        <!-- Titles and text, all that usual blog stuff. Oh, and a big, wide header. -->
    </div>
</div>

Answer 1

Set your wrapper to be display:table and not display:table-cell because otherwise the wrapper gets an anonymous table wrapper at auto width (shrink to fit for tables).

.wrapper{
    display: table;
    width: 100%;
    table-layout:fixed;
}

I wouldn't use vw for the width either as that includes the scrolbar and will cause a horizontal scrollbar when content is below the fold.