列压缩[关闭]答案

【问题标题】：Column compression [closed]列压缩[关闭]
【发布时间】：2017-07-12 11:53:37
【问题描述】：

我有两列内容。第一列应该做自动压缩，第二列应该做固定。如果第一列没有足够的空间，则应该进行压缩。第一栏的内容应该做去淡化。预先不知道大小列。它是怎么做的？

<div class="container" style="display: flex;">
  <div class="left" style="display: flex;">
    <a>
      First
    </a>
    <a>
      Second
    </a>
    <a>
      Third
    </a>
    <a>
      44444
    </a>
    <a>
      5555
    </a>
  </div>

  <div class="right" style="display: flex;">
    <div>1234213321312</div>
    <div>More content</div>
    <div>Button button</div>
  </div>
</div>

【问题讨论】：

first 的大小也应该占用所有可用空间？

标签： javascript html css flexbox

【解决方案1】：

.container {
  display: flex;
}

.left {
  display: flex;
  overflow: hidden;
  /* Add flex-grow: 1; if you need the block to take all remaining space; */
}

.right {
  display: flex;
  flex-shrink: 0; /* don't shrink */
}

<div class="container">
  <div class="left">
    <a>
      First
    </a>
    <a>
      Second
    </a>
    <a>
      Third
    </a>
    <a>
      44444
    </a>
    <a>
      5555
    </a>
  </div>

  <div class="right">
    <div>1234213321312</div>
    <div>More content</div>
    <div>Button button</div>
  </div>
</div>

【讨论】：