Flexbox 不考虑宽度

Posted 2023-03-05

【中文标题】Flexbox 不考虑宽度

【英文标题】：Flexbox not respecting width

【发布时间】：2017-05-26 13:20:19

【问题描述】：

我只是想了解一下 flexbox，但有些事情我不太清楚。

我已经构建了一个左栏 290 像素和右“内容区域”的布局。

我希望内容区域是流畅的，并且两者的高度都是 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>

【参考方案1】：

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

这意味着允许弹性项目收缩，以免溢出容器。

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

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

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

更多详情见：

What are the differences between flex-basis and width? Flexbox - two fixed width columns, one flexible

【讨论】：

只是一个快速的@Michael_B 但在上面的 sn-p 中，搜索突破了section 的位置，有没有办法设置部分来填充剩余的空间而不是溢出身体？

你的左栏是290px。您将右栏中的input 设置为width: 100vw。这就是为什么会有溢出。将input 的长度更改为width: calc(100vw - 290px)。或者，使 input 父级成为 flex 容器。然后给inputflex: 1。这为您提供了更大的灵活性。