Make`minmax`取`px`或`fr`max值中较小的一个

Question

我正在尝试制作一个侧边栏，它的最小宽度为200px，最大宽度为3fr和300px中较小的一个，并且希望它能够趋向于最小的值。与我想要的最接近的行为是minmax(200px，3fr)，但是3fr将继续增长到300px以上。我想我想要的是minmax(3fr，300px)，但是fr不允许作为minmax的第一个参数。有没有一种方法可以在没有媒体查询的情况下做到这一点？

null

.grid {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) 9fr; // this is what I want up till c. 1200px wide
  // grid-template-columns: minmax(200px, 300px) 9fr; // this makes the sidebar too wide until c. 1200px wide
  height: 100vh;
}

.sidebar {
  background: hotpink;
}

.main {
  background: dodgerblue;
}

<div class="grid">
  <div class="sidebar">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet vitae quae nostrum quisquam eveniet laboriosam iste repudiandae provident saepe minima, modi nesciunt accusamus, quia inventore ratione quo beatae consectetur sapiente?</div>
  <div class="main"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptas velit doloribus ipsam, nesciunt quibusdam veniam aut quas qui, mollitia laudantium enim explicabo eaque tenetur? Labore quibusdam maiores dolorem exercitationem!</p>
  <p>Ex adipisci aperiam voluptas veritatis aspernatur perspiciatis nihil impedit blanditiis neque aliquam nemo minima at, voluptates facere. Dicta exercitationem explicabo quasi ea facilis iusto, laudantium quibusdam veritatis animi provident culpa!</p>
  <p>Aut magni soluta amet eveniet quaerat in dignissimos mollitia accusantium architecto repellendus minima quos porro accusamus saepe consectetur corporis numquam, reprehenderit nulla enim fugiat. Illo ipsa mollitia aliquam enim illum?</p>
  <p>Odio rem minus accusamus deleniti, laboriosam voluptates dicta quia. Dolores nostrum voluptates eius odio aut maiores! Repellat nisi dolor laborum aspernatur ipsam? Quam quos hic est beatae blanditiis error sapiente?</p>
  <p>Perspiciatis nostrum iusto delectus modi excepturi facere quisquam, cupiditate animi ducimus? Numquam, labore officia, ad sapiente quo quos tempora minima repudiandae perspiciatis facere ullam, distinctio molestias expedita magni dolore dolores?</p>
  <p>Laudantium quos at adipisci! Doloribus obcaecati nulla, voluptates repellat impedit sed libero nam debitis ad cum molestias adipisci illum modi laborum? Sit vero corporis adipisci dolore repellendus alias soluta quam!</p></div>
</div>

null

Answer 1

fr单元实际上并不表示长度。它表示剩余空间。

所以说你想要px或fr中较小的一个，就像苹果和橘子一样。

在呈现所有实际长度之前，无法确定fr。

您可以使用容器级别的minmax()和项级别的min-width/max-width组合来解决这一问题。

例如：

与我想要的最接近的行为是minmax(200px，3fr)，但是3fr将继续增长到300px以上。

那么：

.grid {
   display: grid;
   grid-template-columns: minmax(200px, 3fr) 9fr;
}

.sidebar {
   max-width: 300px;
}