css - 第一个元素应占用空闲空间，下一个元素应具有固定大小

Question

我想为第一个元素“1fr”设置，任何其他元素都应该有固定的大小

我试过这个并且它有效。

grid-template-columns: 500px repeat(auto-fill, 50px);

这，我正在尝试做的事情。

.container {
    display: grid;
    grid-template-columns: 1fr repeat(auto-fill, 50px);
    > div {
      border: 1px solid red;
    }
  }

第一个元素应该有 1fr（任何可用空间）

在此处输入图像描述

标签： csscss-grid

Answer 1

我认为 flexbox 在这里会更合适。

.container {
  display: flex;
  height: 98vh;
  margin: 1vh 1vw;
}

.item {
  border: 1px solid red;
  flex: 0 0 50px;
  margin: .5em;
}

.wide {
  flex: 1
}

<div class="container">
  <div class="item wide">Auto Remaining Width</div>
  <div class="item">50px</div>
  <div class="item">50px</div>
  <div class="item">50px</div>
</div>