Flexbox具有一个固定的列宽

Question

我正在尝试使用两列来创建flexbox，左边是固定宽度，右边是随着页面大小的变化而缩放。例如：

<style>
    .flex_container {
        display: flex;
        width: 100%;
    }

    .flex_col_left {
        width: 200px;
    }
    .flex_col_right {
        width: 85%;
    }
</style>

<div class = "flex_container">
    <div class = "flex_col_left">
        .....
    </div>
    <div class = "flex_col_right">
        .....
    </div>
<div>

这在一定程度上起作用，但是当我混合px和％时感觉不对。这样做是不正确的，如果是这样，可能是更好的解决方案？

编辑类命名问题是一个错字，现在已修复。

Answer 1

您可以使用%而不是在右侧列的flex: 1中设置宽度，而是连续使用剩余的自由宽度。

.flex_container {
  display: flex;
  width: 100%;
}
.flex_item_left {
  width: 200px;
  background: lightgreen;
}
.flex_item_right {
  flex: 1;
  background: lightblue;
}

<div class="flex_container">
  <div class="flex_item_left">
    .....
  </div>
  <div class="flex_item_right">
    .....
  </div>
  <div>

Answer 2

您可以在非固定宽度元素上使用flex-grow: 1以允许其增长（并且不设置宽度）。

.flex_container {
  display: flex;
  width: 100%;
}
.flex_item_left {
  width: 200px;
  background: #fa0;
}
.flex_item_right {
  background: #0fa;
  flex-grow: 1;
}

<div class="flex_container">
  <div class="flex_item_left">
    .....
  </div>
  <div class="flex_item_right">
    .....
  </div>
  <div>