JROB JROB - 6 months ago 16
HTML Question

Flex item background color disappearing when window is very small

I am trying to make a layout that has a left column of 275px wide and a right column the rest of the width. I would like both columns to be the same height (height of the tallest element).

I thought using

flex
display property would work best:

.jflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
item-align: stretch;
}
.left-menu {
width: 275px;
padding: 1em;
background: red;
}
.right-content {
width: calc(100% - 275px);
padding: 1em;
background: blue;
}


HTML:

<div class="jflex">

<div class="left-menu">

Sidebar

</div>

<div class="right-content">

Main content

</div>

</div>


This looks fine except when the browser window is resized very small, the right column background color does not fill the entire width of the column.

See this example: https://jsfiddle.net/3rejgk5b/2/ (Resize your browser window very small)

EDIT: Here is an image of what I'm seeing:

Example

Answer

body { margin: 0; }                /* remove default margin */

.jflex {
    display: flex;
    flex-direction: row;           /* initial setting; can be omitted */
    flex-wrap: nowrap;             /* initial setting; can be omitted */
    /* item-align: stretch;        correct property is `align-items`;
                                   and it's an initial setting so it can be omitted */
}

.left-menu {
    /* width: 275px; */
    flex: 0 0 275px;               /* KEY RULE: don't grow, don't shrink, fixed width */
    padding: 1em;
    background: red;
}

.right-content {
    /* width: calc(100% - 275px);  flexbox has a better way */
    flex: 1;                       /* KEY RULE: tells element to consume remaining space */
    padding: 1em;
    background: blue;
}
<div class="jflex">
  <div class="left-menu">Sidebar test</div>
  <div class="right-content">
    <h1>This would be the page title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
       fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
       culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Revised Fiddle