Flexbox Width Variation with Content, Should Be Fixed Width

Flexbox width variation with content, should be fixed width

2 things you need to do:

Change the flex-shrink value in flex: 1 0 auto from 0 to 1 (flex: 1 1 auto) so the content element is allowed to shrink
As you have a very long word, you also need to add word-wrap: break-word to insert line breaks within words to prevent text from overflowing

Note, word-wrap has been renamed to overflow-wrap, though not all browsers support the new name, so if you to use it, I would keep the old as well for now.

Stack snippet

function openNav() {    document.getElementById("mySidenav").style.width = "250px";}
function closeNav() {    document.getElementById("mySidenav").style.width = "0";}

      body {  display: flex;  flex-direction: column;  min-height: 100vh;  text-align: center;}body .header {  width: 100%;  height: 182px;  background: white;}body .holygrail-body {  flex: 1 0 auto;  display: flex;  width:1000px;  margin-right:auto;  margin-left:auto;}body .holygrail-body .content {  flex: 1 1 auto;                            /*  changed  */  background: lightgreen;  overflow-y: auto;  word-wrap: break-word;                     /*  added  */}body .holygrail-body .nav {  width: 240px;  list-style: none;  text-align: left;  order: -1;
  margin: 0;}body .holygrail-body .aside {  width: 100px;  background: orange;}body .footer {  width: 100%;  height: 60px;
}.sidenav {    height: 100%;    width: 0;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: #fff;    overflow-x: hidden;    transition: 0.5s;    padding-top: 60px;}
.sidenav a {    padding: 8px 8px 8px 32px;    text-decoration: none;    font-size: 25px;    color: #818181;    display: block;    transition: 0.3s;}
.sidenav a:hover {    color: #f1f1f1;}
.sidenav .closebtn {    position: absolute;    top: 0;    right: 25px;    font-size: 36px;    margin-left: 50px;}  .mobile-header{display: none;}.hamburger{display: none;}ul, ol {    margin-top:10px;
}.nav li {    list-style: none outside none;    line-height: 36px;    margin-left:-15px;}.nav li a {    color: #5f141f;    text-decoration: none;    text-shadow: 2px 1px #f6eaec;    font-size: 18px;    margin-left:-15px;  }  .sidenav li {      list-style: none outside none;      line-height: 36px;      margin-left:-15px;  }  .sidenav li a {      color: #5f141f;      text-decoration: none;      text-shadow: 2px 1px #f6eaec;      font-size: 18px;      margin-left:-15px;    }@media (max-width: 700px) {  body .holygrail-body {    flex-direction: column;  }  body .holygrail-body .nav, body .holygrail-body .aside {    width: 100%;  }  .sidenav {padding-top: 15px;}  .sidenav a {font-size: 18px;}  .hamburger{display: inline;margin-left:-900px;}  .nav{display: none;}  .mobile-header{display: inline;}    .header{display: none;}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <header class="header">    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="Sample Image">  </header>  <header class="mobile-header">    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="Sample Image">  </header><div class="holygrail-body">  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>  <div id="mySidenav" class="sidenav">    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>    <ul>      <li><a href="#">Home</a></li>      <li><a href="#">New Items</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>      <li><a href="#">Information Page</a></li>    </ul>  </div>  <div class="content">
  <h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst</h1>          </div>
  <ul class="nav">    <li><a href="#">Home</a></li>    <li><a href="#">New Items</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>    <li><a href="#">Information Page</a></li>
  </ul>

</div><footer class="footer">©2017</footer>

How to set a fixed width column with CSS flexbox

You should use the flex or flex-basis property rather than width. Read more on MDN.

.flexbox .red {
  flex: 0 0 25em;
}

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

A simple demo shows how to set the first column to 50px fixed width.

.flexbox {  display: flex;}.red {  background: red;  flex: 0 0 50px;}.green {  background: green;  flex: 1;}.blue {  background: blue;  flex: 1;}

<div class="flexbox">  <div class="red">1</div>  <div class="green">2</div>  <div class="blue">3</div></div>

Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width?

Yes, set the fixed column to flex-grow: 0 (so it doesn't grow), flex-shrink: 0 (so it doesn't shrink), and flex-basis: 300px (so it stays fixed at 300px).

jsFiddle demo

.specific-image-container {    display: flex;}.specific-image-column {    flex: 1;    background-color: blue;}.more-images-column {    flex: 0 0 300px; /* new */    background-color: red;}.content {  height: 300px;}

<div class="specific-image-container">
  <div class="specific-image-column">    <div class='content'></div>  </div>
  <div class="more-images-column">    <div class='content'></div>  </div>
</div>

Flexbox: how to combine variable and fixed widths

Give the first item flex-basis: 50% and the middle flex-grow: 1.

This will make the first 50% wide, the last as wide as its content and the middle fill the remaining space left

.wrapper {  display: flex;}
.wrapper .item {  border: 1px dotted gray;}
.wrapper .item:first-child {  flex-basis: 50%;}
.wrapper .item:nth-child(2) {  flex-grow: 1;}

<div class="wrapper">  <div class="item">50%  </div>  <div class="item">Fill remaining  </div>  <div class="item">Button  </div></div>

How can I have two fixed width columns with one flexible column in the center?

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

0 = don't grow (shorthand for flex-grow)
0 = don't shrink (shorthand for flex-shrink)
230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Flexbox with one fixed column width

Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a row.

.flex_container {  display: flex;  width: 100%;}.flex_item_left {  width: 200px;  background: lightgreen;}.flex_item_right {  flex: 1;  background: lightblue;}

<div class="flex_container">  <div class="flex_item_left">    .....  </div>  <div class="flex_item_right">    .....  </div>  <div>

How to fit flex item's width to content image in flexbox?

Just add height: calc(100% / 3) to .a > div.

Edit: Works on Firefox also.

.a {
  border: 1px red solid;
  width: 200px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.a > div {
  border: 1px blue solid;
  min-height: 0;
  height: calc(100% / 3); /* 3 is flex items in flex container */
  box-sizing:border-box;
}

.a > div > img {
  height: 100%;
}

<div class="a">
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
  <div>
    <img src="https://via.placeholder.com/150.png" />
  </div>
</div>

Width ignored on flexbox items

Remove the width on .container > div and use flex: auto; on #main: fiddle

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

Flexbox Width Variation with Content, Should Be Fixed Width