Dynamic CSS grid with max height relevent to another column's content

Question

Is there a way to force a grid section to match the height of another column? I have a video player and a long list of videos for the user to choose from. The list currently has the overflow-y: scroll property and a max height to fill the total grid area. But, because the video player has a dynamic height as well there ends up being a gap.

Here's what I'm going for:

I want the red section to max out where the yellow section ends. I'm currently trying to use a display: grid layout, but I'm open to different suggestions.

share your code so we can see what you have done and suggest or advise from there. — G-Cyrillus
– G-Cyrillus, Commented Jul 1, 2021 at 21:18
You can't use CSS-Grid without using specific heights here. If you had two actual column wrappers then this is possible, — Paulie_D
– Paulie_D, Commented Jul 1, 2021 at 21:54
looks to me like a typical grid-layout,. no need to set an explicit height, height will com from the contents themselves, except for the list part that we have to remove from the height calculation via .. height:0 (right an height is needed) . live example : codepen.io/gc-nomade/pen/PomPbEM Is that what you look for ? — G-Cyrillus
– G-Cyrillus, Commented Jul 3, 2021 at 11:09

G-Cyrillus · Accepted Answer · 2021-07-03 12:30:26Z

(from earlier comment) Here is a grid example excluding the list part from height calculation.

section {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1em;
  margin: auto;
  max-width: 1200px; 
}

#box1 {
  grid-row: 1;
  grid-column: 1;
  background: #90EE90;
  padding: 1em;
}

#box2 {
  grid-column: 1;
  grid-row: 2 / span 2;
  height: 0;/* remove it from heigt calculation*/
  min-height: 100%;/* give it a min-height to match rows's height */
  overflow: auto;
  background: #FF6347;
}

#box3 {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: #6495ED;
  width: 100%;
}

#box4 {
  grid-column: 2;
  grid-row: 3;
  background: #FFFF00;
  text-align: center;
  padding: 1em;
}

<section>
  <div id="box1"> <input placeholder="filter"></div>
  <div id="box2">
    <ul>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
      <li>list-itel</li>
    </ul>
  </div>
  <video id="box3" controls>

    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>
  <div id="box4"><button>button</button></div>
</section>

So height: 0, min-height: 100% is the trick here. Odd hack but can't argue with results.

Collectives™ on Stack Overflow

Dynamic CSS grid with max height relevent to another column's content

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related