Flexbox不尊重宽度

Question

我正在尝试理解flexbox，但仍有一些问题无法解决。

我已经建立了一个布局，其中左侧列宽为290px，右侧是“内容区域”。

我希望内容区域具有流动性，并且两者的高度均为100%。我已经基本实现了这一点，但如果我在内容区域中填充宽度为100vw的内容，则会使左列缩小。

.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>

- Liam

Answer 1

弹性容器的初始设置为flex-shrink: 1。

这意味着，为了不溢出容器，弹性项目可以缩小。

尝试使用以下方法代替width: 290px：

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

或者只需在规则中添加flex-shrink: 0，以禁用收缩功能（.callout-panel）。

更多详情请参见：

• flex-basis和width之间有什么区别？
• Flexbox - 两个固定宽度列，一个自适应宽度列

- Michael Benjamin

---

@Michael_B，只是一个快速的问题，上面的代码片段中搜索会跳出它所在的“section”，有没有办法将该“section”设置为填充剩余空间而不溢出页面主体？ - Liam

你的左列宽度为290像素。你在右列中将input设置为width: 100vw。这就是为什么会出现溢出的原因。将input的长度更改为width: calc(100vw - 290px)。或者，将input的父元素设置为flex容器。然后给input设置flex: 1。这样可以提供更多的灵活性。 - Michael Benjamin