我正在尝试制作一个侧边栏，它的最小宽度为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
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;
}
