Question

我试图让我的头围绕着flexbox，我无法解决一些问题。

我已经构建了一个左侧列为290px且右侧内容区域为“＃”的布局。

我希望内容区域是流畅的，并且都是100％的高度。我有点实现了这一点，但是如果我用宽度为100vw的东西填充内容区域，它会将左列向下推。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这意味着允许Flex项目缩小，以免溢出容器。

而不是width: 290px试试这个：

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

或者只是将flex-shrink: 0添加到规则（.callout-panel）以禁用收缩。

有关详细信息，请参阅：

Flexbox不尊重宽度

1 个答案: