Make `minmax` take whichever is smaller from a `px` or `fr` max value

user_590593 0
Viewed 83

I'm trying to make a sidebar that has a minimum-width of 200px and a maximum of whichever is smaller out of 3fr and 300px, and would like it to tend toward the smallest value it can be. The closest behaviour to what I'd like is minmax(200px, 3fr), but 3fr will continue to grow above 300px . I think what I'd like is minmax(3fr, 300px), but frs aren't allowed as the first argument to minmax. Is there a way to do this without a media query?

.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>

css-grid css
1 Answers

The fr unit doesn't actually represent a length. It represents remaining space.

So saying you want the lesser of px or fr is kind of like apples and oranges.

fr can't be determined until all actual lengths have been rendered.

You may be able to work this out using a combination of minmax() at the container level, and min-width / max-width at the item level.

For example:

The closest behaviour to what I'd like is minmax(200px, 3fr), but 3fr will continue to grow above 300px.

So what about:

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

.sidebar {
   max-width: 300px;
}
user_35972760
Related