Flexbox not respecting width

Question

I'm trying to get my head around flexbox only I can't quite figure some things out.

I've built a layout that has a left column of 290px and a right 'content area'.

I want the content area to be fluid and both to be 100% in height. I've somewhat achieved this, but if I populate the content area with something with a width of 100vw it pushes the left column down in size.

.right_col {
  min-height: 792px;
  height: 100%;
  margin-left: 0px;
  background: #F7F7F7;
  display: flex;
  padding: 0 !important;
  width: 100%;
}
.callout-panel {
  background: #fff;
  width: 290px;
  float: none;
  clear: both;
  padding: 0 20px;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100vw;
  margin-bottom: 0;
}

<div class="right_col">
  <div class="callout-panel">Left column</div>
  <section class="page-inner">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="input-group-btn">
             <button class=" btn-search" type="button" ></button>
       </span>
    </div>
  </section>
</div>

score 39 · Accepted Answer · edited May 23 '17 at 11:45

39

An initial setting of a flex container is flex-shrink: 1.

This means that a flex item is allowed to shrink, in order to not overflow the container.

Instead of width: 290px try this:

flex: 0 0 290px; /* can't grow, can't shrink, fixed at 290px */

Or just add flex-shrink: 0 to the rule (.callout-panel) in order to disable shrinking.

For more details see:

edited May 23 '17 at 11:45

Community

1
1

answered Jan 11 '17 at 16:46

Michael Benjamin

346,931
104
581
701

Just a quick one @Michael_B but in the above snippet the search breaks out of the `section` its in, is there a way to set the section to fill the remainder of the space and not overflow the body? – Liam Jan 12 '17 at 10:44
1

Your left column is 290px. You have your `input` in the right column set to `width: 100vw`. That's why there's an overflow. Change the length of the `input` to `width: calc(100vw - 290px)`. OR, make the `input` parent a flex container. Then give the `input` `flex: 1`. This gives you more flexibility. – Michael Benjamin Jan 12 '17 at 13:30

Flexbox not respecting width

1 Answers1