使用flexbox，我能否拥有1个固定宽度的列和1个占据其余宽度的列？

Question

目前，我有一些类似于下面的代码。我正在尝试使红色列在设置宽度为300px时不响应，但保持蓝色列的响应性。

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex: 4;
    background-color: blue;
}
.more-images-column {
    flex: 1;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'></div>
    </div>
    
    <div class="more-images-column">
        <div class='content'></div>
    </div>
    
</div>

Answer 1

是的，将固定列设置为flex-grow: 0（这样它不会增长），flex-shrink: 0（这样它就不会缩小）和flex-basis: 300px（这样它就固定在300px）。

jsFiddle demo

.specific-image-container {
    display: flex;
}
.specific-image-column {
    flex: 1;
    background-color: blue;
}
.more-images-column {
    flex: 0 0 300px; /* new */
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

  <div class="specific-image-column">
    <div class='content'></div>
  </div>

  <div class="more-images-column">
    <div class='content'></div>
  </div>

</div>

Answer 2

在无响应元素上设置flex-shrink: 0; width: 300px;，在flexible元素上设置flex-grow: 1;。完成此操作后，您就可以摆脱flex属性。

Answer 3

尝试使用flex-basis规则。您可以使用此规则代替flexbox元素中的宽度。您还可以使用calc将第一列设置为100％-300px，以确保300px优先。

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex-basis: calc(100% - 300px);
    background-color: blue;
}
.more-images-column {
    flex-basis: 300px;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'></div>
    </div>
    
    <div class="more-images-column">
        <div class='content'></div>
    </div>
    
</div>