3

I have the following JS and HTML code: 

.first {
  height: 50px;
  background-color: red;
}

.second {
  height: 100px;
  background-color: green;
}

.container {
  display: grid;
  grid-template-rows: min-content;
  grid-template-columns: 265px auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

Here is the example: https://codepen.io/anon/pen/xMMOBB

Even if I add overflow:hidden to the second element, I can see overflowed contents of second element. Why?

How can I hide them? I want to see only 50px of my CSS grid.

Nick
  • 2,418
  • 16
  • 20
Sharikov Vladislav
  • 7,049
  • 9
  • 50
  • 87

1 Answers1

3

Overflow need to be applied to the container where the element are overflowing and not the element itself and you will not have any overflow because min-content doesn't mean the minimum height from all the elements. This property is useful when dealing with width and not height because height are by default auto and already fitting the minimum content in most of the cases.

What you need is to simply set a max-height or height to the container:

.first {
  height: 50px;
  background-color: red;
}

.second {
  height: 100px;
  background-color: green;
}

.container {
  display: grid;
  max-height:50px;
  overflow:hidden;
  grid-template-columns: 265px auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

or grid-template-rows

.first {
  height: 50px;
  background-color: red;
}

.second {
  height: 100px;
  background-color: green;
}

.container {
  display: grid;
  grid-template-rows:50px;
  overflow:hidden;
  grid-template-columns: 265px auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

UPDATE

In case you don't want to set a height to the container you can make the content of the second column to be out of the flow thus it won't increase the height of the container:

.first {
  height: 50px;
  background-color: red;
}

.second {
  position:relative;
}
.second > div {
  height: 100px;
  background-color: green;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.container {
  display: grid;
  overflow:hidden;
  grid-template-columns: 265px auto;
}
<div class="container">
  <div class="first"></div>
  <div class="second">
    <div></div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • yep. that works. but actually in my case I want something like this. I have popup. I have 2 sides (splitted vertically) of that popup. 2 elements. Is it somehow possible not to define height of whole grid? Is it possible to set whole grid height based on left element content height? And right element height will not expand whole row height? In business terms, I have some static height content on the left and list on the right. I want list on the right to be scrollable and I want it to get all available height based on left element height. – Sharikov Vladislav Feb 19 '19 at 08:05
  • @SharikovVladislav something like that https://stackoverflow.com/a/48943583/8620333 ? – Temani Afif Feb 19 '19 at 08:07
  • I want right block fit height which is defined by left block. I don't want to set height of whole popup, since I have at least 4 cases of different heights of that block. Left block can contain 1, 2, 3 or 4 items (all has static height). – Sharikov Vladislav Feb 19 '19 at 08:14
  • @SharikovVladislav this all waht you need then : https://stackoverflow.com/a/48943583/8620333 .. no need to set any height to container, simply make the right element to have out of the flow content (using absolute position) and it will work like expected, it also uses flexbox – Temani Afif Feb 19 '19 at 08:18
  • Hm. Yes just read this and the question is absolutely same. Sad I couldn't find it earlier. Btw... Any way to make same but using css grid layout? I thought min-content would help there, but looks like it didn't. – Sharikov Vladislav Feb 19 '19 at 08:19
  • Hm. I am trying to apply the way from linked question. And it does not work for me. Any thoughts why? https://codepen.io/anon/pen/PVVBOw For some reasons, right element does not have width based on its content. In your case I think flex: 1 do the work and all divs take their width. I don't want to set width of right element too. I want it to get width based on its contents. – Sharikov Vladislav Feb 19 '19 at 08:29
  • I tried your approach from the update. https://codepen.io/anon/pen/qggyeG Looks like works correcly. Any thoughts why I get this problem (width: 0) in flex way? – Sharikov Vladislav Feb 19 '19 at 08:31
  • @SharikovVladislav I guess with flexbox you need to add `flex:1` to the right column – Temani Afif Feb 19 '19 at 08:47
  • But this will expand width to all available width (which is 100% minus width of first column). Okay. Thank you. I will try to use css grid way in my case (btw still not working at the moment for some reasons :) ). Thank you for your time and answers – Sharikov Vladislav Feb 19 '19 at 08:53