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

Question

I m trying to set up a flexbox layout with three columns where the left and right columns have a fixed width  and the center column flexes to fill the available space    Despite setting up dimensions for the columns  they still seem to shrink as the window shrinks    Anyone know how to accomplish this   An additional thing I will need to do is hide the right column based on user interaction  in which case the left column would still keep its fixed width  but the center column would fill the rest of the space     x000D   x000D   container   x000D      display  flex  x000D      justify-content  space-around  x000D      align-items  stretch  x000D      max-width  1200px  x000D    x000D   x000D   column left   x000D      width  230px  x000D    x000D   x000D   column right   x000D      width  230px  x000D      border-left  1px solid  eee  x000D    x000D   x000D   column center   x000D      border-left  1px solid  eee  x000D    x000D   lt div id  container  gt  x000D       lt div class  column left  gt  x000D           lt p gt Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013  It featured essays  fiction  and art by a wide range of contributors that explored anxiety from scientific  literary  and artistic perspectives  lt  p gt  x000D       lt  div gt  x000D       lt div class  column center  gt  x000D           lt img src  http   i imgur com 60PVLis png  width  100  height  100  alt    gt  x000D       lt  div gt  x000D       lt div class  column right  gt  x000D          Balint Zsako x000D           lt br  gt  Someone   s Knocking at My Door x000D           lt br  gt  01 12 13 x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here s a JSFiddle  http   jsfiddle net zDd2g 185

User · Answer

Compatibility with older browsers can be a drag, so be adviced.

If that is not a problem then go ahead. Run the snippet. Go to full page view and resize. Center will resize itself with no changes to the left or right divs.

Change left and right values to meet your requirement.

Thank you.

Hope this helps.

_x000D_

#container {_x000D_
  display: flex;_x000D_
}_x000D_
_x000D_
.column.left {_x000D_
  width: 100px;_x000D_
  flex: 0 0 100px;_x000D_
}_x000D_
_x000D_
.column.right {_x000D_
  width: 100px;_x000D_
  flex: 0 0 100px;_x000D_
}_x000D_
_x000D_
.column.center {_x000D_
  flex: 1;_x000D_
  text-align: center;_x000D_
}_x000D_
_x000D_
.column.left,_x000D_
.column.right {_x000D_
  background: orange;_x000D_
  text-align: center;_x000D_
}

_x000D_

<div id="container">_x000D_
  <div class="column left">this is left</div>_x000D_
  <div class="column center">this is center</div>_x000D_
  <div class="column right">this is right</div>_x000D_
</div>

_x000D_

User · Answer

Despite setting up dimensions for the columns  they still seem to shrink as the window shrinks    An initial setting of a flex container is flex-shrink  1  That s why your columns are shrinking   It doesn t matter what width you specify  it could be width  10000px   with flex-shrink the specified width can be ignored and flex items are prevented from overflowing the container      I m trying to set up a flexbox with 3 columns where the left and right columns have a fixed width      You will need to disable shrinking  Here are some options    left   right        width  230px       flex-shrink  0         OR   left   right        flex-basis  230px       flex-shrink  0      OR  as recommended by the spec    left   right       flex  0 0 230px        don t grow  don t shrink  stay fixed at 230px           7 2  Components of   Flexibility      Authors are encouraged to control flexibility using the flex shorthand   rather than with its longhand properties directly  as the shorthand   correctly resets any unspecified components to accommodate common   uses    More details here  What are the differences between flex-basis and width      An additional thing I need to do is hide the right column based on user interaction  in which case the left column would still keep its fixed width  but the center column would fill the rest of the space    Try this    center   flex  1      This will allow the center column to consume available space  including the space of its siblings when they are removed   Revised Fiddle

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to flexbox