Html 如何在具有两列的flex box行中创建动态宽度？

我希望两列中的第二列在需要时收缩，以便第一列可以占用更多空间。我将如何使用flex box来实现这一点？我想实现动态宽度行为，而不是输入任何特定的像素值

.container{
边框：1px纯黑；
宽度：300px；
}
.container.column{
边框：1px纯品红色；
}
/*第二列*/
.container.column+列{}
/*柔性网格*/
.flex{
显示器：flex；
}
.行{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
}

一些很长的描述文字和一些额外的单词在这里和那里这样说。
123£

这是使用

flex

时自动发生的，因此以下是使其工作所需的最低css：

.container {
  border: 1px solid black;
  width: 300px;
}

.flex {
    display: flex;
    width: 100%;
}

.column {
  border: 1px solid magenta;
}

然后更改您的HTML：

<div class="container">
  <div class="flex">
    <div class="column">
      // ...
    </div>
    <div class="column">
      // ...
    </div>
  </div>
</div>

// ...
// ...

我总是觉得这本指南非常有用：