Bootstrap column layout breaks on resize if resized back to the same size as on page load

Question

If I load my page everything is fine. <div class="sidebar"> uses exactly 320px whereas the <div class="col"> uses the remaining space on the left. Both divs are in one row (side-by-side).

If I enlarge the browser window, everything is still fine (divs are side-by-side).

If I make the browser window smaller now (to the original size, when page was loaded), the layout breaks instantly (<div class="sidebar"> is below <div class="col"> now).

If I now reload the browser window, everything works fine again.

It seems like the left <div class="col"> is not re-rendered quickly enough. And therefore when reduce the window size, the sidebar put below <div class="col">.

Is there another way to make such a layout: one div using fixed width for the sidebar and another div using flexible width (space left in the row next to the sidebar).

I am using the following markup:

<div class="row">
    <div class="col">
    ...
    </div>
    <div class="sidebar">
    ...
    </div>
</div>

CSS:

.sidebar {
    width: 320px;
    padding: 10px 10px 0;
    background: #FFFFFF;
    margin-bottom: 20px;
    z-index: 1;
    display: block;
}

Screenshot when page loaded (browser window = 1095px):

Screenshot after enlarge and reduce the size of the browser window (to the original size when page was loaded (browser window = 1095px)!):

Live example: https://www.lotsearch.net/artist/pablo-picasso

Answer 1

use calc

.sidebar {
  width: 320px;
}
.col {
  width: calc(100% - 320px);
}

sidebar will cover 320px width and col will cover all remaining space.