This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 5 years ago.
I meet a confused problem with CSS grid. I have a grid with 2 columns, the first is 100px, the second is fit the remaining (grid-template-columns: 100px auto). Everything works right. But if the second column has an extra large element, the width of second column is overflow. I tried to use the max-width but it doesn't work.
Here is my fiddle, please check it: https://jsfiddle.net/truongwp/ka54e7u4/1/
.container {
display: grid;
grid-template-columns: 100px auto;
grid-gap: 30px;
width: 400px;
}
.right {
max-width: 100%;
}
.text {
width: 700px;
max-width: 100%;
}
<div class="container">
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere
in vitae leo.
</div>
<div class="right">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus lorem in iaculis dictum. Etiam nec urna et erat volutpat ultrices non vel elit. Nullam commodo tortor a est luctus, et semper ipsum suscipit. Praesent in ipsum quis odio imperdiet posuere
in vitae leo. Aliquam facilisis at justo vel pellentesque. Quisque vitae lobortis nibh, commodo facilisis ante. Nullam facilisis leo vel aliquet egestas. Etiam commodo porta lorem pretium suscipit. Morbi finibus est ac ex suscipit, at feugiat magna
facilisis. Sed tempor ex interdum lobortis gravida. Sed rutrum semper sapien, at finibus metus maximus in. In turpis augue, pellentesque at lectus nec, porta elementum justo. Sed consequat nec dui et interdum. Aenean placerat orci sem, ut blandit
ex semper sit amet.
</div>
</div>
</div>
Thank you very much!
Try to add
overflow: auto
Like this:
.right {
max-width: 100%;
overflow: auto
}
It will fix your trouble!
https://jsfiddle.net/ka54e7u4/2/
Related
I want to be able to control the width of a parent element to a child element that may exceed the width of the container - of which width is defined by min content and controlled by an element by max content.
article {
width: min-content;
background: cyan;
}
.max-content {
width: max-content;
}
.overflowing-width {
width: 100vw;
height: 20px;
background: darkred;
}
<article>
<h2 class="max-content">This should define the width of the container.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo tortor. Quisque interdum tempus ipsum, at facilisis libero lobortis vel. Nunc id justo quis risus porta elementum. Duis facilisis a magna sit amet tincidunt. In fermentum et erat quis imperdiet. Vivamus et orci quam. Suspendisse sollicitudin urna id neque bibendum, at luctus orci scelerisque. Integer hendrerit consectetur enim, sed accumsan risus blandit vel. Mauris efficitur orci non luctus pellentesque.</p>
</article>
<article>
<h2 class="max-content">This should define the width of the container.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo tortor. Quisque interdum tempus ipsum, at facilisis libero lobortis vel. Nunc id justo quis risus porta elementum. Duis facilisis a magna sit amet tincidunt. In fermentum et erat quis imperdiet. Vivamus et orci quam. Suspendisse sollicitudin urna id neque bibendum, at luctus orci scelerisque. Integer hendrerit consectetur enim, sed accumsan risus blandit vel. Mauris efficitur orci non luctus pellentesque.</p>
<div class="overflow-control">
<div class="overflowing-width"></div>
</div>
</article>
The second article's overflow-control element should not exceed the width of the <h2>.
I have tried to use relative positioning through the article element:
article {
position: relative;
}
.overflow-control {
max-width: 100%;
overflow: auto;
}
But this does not alter the behavior what-so-ever.
I have also tried adding an overflow: hidden property to the article element with no effect.
I'm trying to separate children of a container div into left/right columns, with no vertical whitespace below or above the children items.
I'll explain the setup and provide a picture of the desired result, and then I’ll explain every solution I’ve tried and why each solution doesn’t seem to work.
The Setup
I have a container with children <div>s that have a class of either .left or .right. Here's the code (I am bound to this HTML structure):
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
I need the children to display in two columns. If the child has class .left it goes in the left column. If it has .right it goes in the right column.
I need the children to fill up their respective column starting from the top, with no white-space above or below each child.
Each child's height is determined by its text contents, so I cannot set a fixed height for each child.
Here is the desired result (styling added for emphasis):
Desired Outcome Visual:
And a reminder, I'm bound by (1) the previous HTML structure and (2) height of child <div> cannot be fixed.
Here's what I've tried, along with why it didn't work:
Option 1: CSS Float
I set each child’s width to 50% and display to inline-block, and apply a float:left to the .left children and float: right to the .right children.
This almost works, except if the first two children have a .right class. You can see the second .right child floats to take up the remaining 50% left of the first .right child.
.container > div {color: white; border-bottom: 3px solid white;}
.container {
overflow: auto;
}
.col {
width: 50%;
}
.right {
background: #999;
float: right;
}
.left {
background: #000;
float: left;
}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Option 2: CSS-Grid
I apply some CSS grid options. After much research and trial and error, the closest I could come up with is this:
.container {
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: column;
}
.right {
background: #999;
grid-column-start: 2;
}
.left {
background: #000;
grid-column-start: 1;
}
.container > div {color: white; border-bottom: 3px solid white;}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Again, this comes very close and even solves the problem pointed out in option 1. BUT you’ll see when a .left child has a larger height than a .right child, it causes the .right child to add white-space to fill the row.
Option 3: Desandro Masonry
I tried the Desandro Masonry option, but the children are output in their static order, with no respect to left/right. And I’ve not found a clear option in the library that allows to tap into a class and assign it into a column based on .right or .left class.
var msnry = new Masonry( '.container', {
itemSelector: '.col',
});
.container {
display: grid;
}
.col {
width: 50%;
}
.container > div {color: white; border-bottom: 3px solid white;}
.right {
background: #999;
}
.left {
background: #000;
}
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Option 4: Flexbox
I tried a number of Flexbox combinations, and I couldn’t get any to work. My research suggests FlexBox wouldn’t do what I needed anyway. But maybe I’m missing something?
Option 5: CSS Column-Count property
Just for kicks, I messed around with the CSS Column-Count property, but there’s no way to assign children to a left/right column.
===
At this point I’m stuck. I’ve tried so many variations and read so many stacks today that my brain is pooped.
I would be very grateful for any ideas that will achieve the desired outcome. It's probably that I'm just missing something in one of the solutions I've already tried.
Thanks for your time!
If you are allowed to use a little JS (and I assume you are since one of your trials included a jquery library) you can calculate the vertical position of each element, position each element absolutely, and at the end set the height of container if its relative positioning is important.
let leftH = 0;
let rightH = 0;
const els = document.querySelectorAll('.container > *');
els.forEach(el => {
if (el.getAttribute('class').includes('left')) {
el.style.top = leftH + 'px';
leftH += el.offsetHeight;
} else {
el.style.top = rightH + 'px';
rightH += el.offsetHeight;
}
});
document.querySelector('.container').style.height = ((leftH > rightH) ? leftH : rightH) + 'px';
.container {
width: 100vw;
position relative;
}
.container>* {
width: 50%;
border: 1px solid;
position: absolute;
}
.right {
margin-left: 50%;
}
<div class="container">
<div class="right col">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="right col">R-Pellentesque nec tellus at tellus</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
<div class="col right">R-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat odio eget felis mollis placerat. Donec consequat tincidunt nisl sit amet iaculis. In sit amet nisl purus.</div>
<div class="left col">L-Pellentesque nec tellus at tellus scelerisque rutrum ut quis nibh. Aliquam nisi nisl, finibus eu condimentum ac, pretium quis augue.</div>
<div class="left col">L-Nulla viverra lorem risus, nec consectetur urna pretium sed. Vestibulum bibendum, tortor vel viverra consequat, urna purus pulvinar odio, sed rutrum justo risus in justo.</div>
<div class="right col">R-Vivamus in lacus sed dolor ullamcorper blandit non fermentum tortor.</div>
</div>
Putting it simple.
Here is what I done:
https://codepen.io/matt1991/pen/abdeZNv
I've tried using flexbox to a extent, tried to mess with a lot of classes and properties, and yet can't do what I need, that is:
I need the div right-down to fill the space under the div right-up until both of them, together, have the same height of left, using only css, on a system built up on materialize.css. I know how to do that with javascript involved, but I want to make it using only css, in a way that, if left or right-up get more or less text, the size stays the same.
ps.: The red div MUST stop at the green one, it cannot go until the top and z-indexed behind the green one.
Any ideas?
If it's okay to remove the materialize.css it's easy:
<div id="main" class="container">
<div class="flex">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
</div>
<div id="right">
<div id="right-up">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci.
</div>
<div id="right-down"></div>
</div>
</div>
</div>
body {
height: 100%
}
#main {
display: flex;
flex-flow: column;
height: 100%
}
.flex {
display: flex;
}
#left {
background-color: blue;
flex: 2;
}
#right {
display: flex;
flex-direction: column;
flex: 1;
}
#right-up {
background-color: green;
}
#right-down {
background-color: red;
flex: 1;
}
Question Information
Here I have a Bootstrap (Version 4.0.0 beta 2) alert with a margin of 5% on each side. I also have three W3.CSS cards nested inside a w3 container that are each 31% of the container size and a 1% margin on each side per card.
Desired Result:
I want the card's container to have a 5% margin on each side with each of the cards having a 1% margin in between each. So far the two cards on the left and right do not have the same margin with the alert on top.
Current Result:
Expected Result:
HTML:
<div class="alert alert-success" role="alert" style="overflow: hidden;">
This is the bootsrap alert I want the column's container to have the same 5% margin on both sides as.
</div>
<div class="w3-container">
<div class="w3-panel w3-card w3-yellow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
</div>
<div class="w3-panel w3-card-2 w3-yellow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
</div>
<div class="w3-panel w3-card-4 w3-yellow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
</div>
</div>
CSS:
.alert {
margin-top: 10px;
margin-right: 5%;
margin-left: 5%;
color: #fff;
border: none;
background-color: #2ecc71;
}
.w3-container {
margin: 0 5%;
}
.w3-card,
.w3-card-2,
.w3-card-4 {
float: left;
width: 31%;
margin: 0 1%;
padding: 20px;
}
I have also provided a JSFiddle Demo
Since you'r targeting the .w3-container, which is a parent of the w3-cards, you should be using padding instead of a margin:
.w3-container {
padding: 0 4%;
}
I've set 4% for the left/right padding because of the 1% left/right margin of the w3-cards.
I've also changed the width of the w3-cards to 31.33% for accuracy and to remove the undesired space.
Updated fiddle
I have a .list of .items, like this one:
<div class="list">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Both .item and .list have a maximal height, say 100px and 280px.
I'd like to hide the last .item when it overflows, possibly with no JS.
What I mean is that if .list has overflow: hidden, and all .items reach the max height, then the last one is partially cut. I'd like to hide it completely, i.e. either it fits, or it disappears.
I can change both the CSS and the HTML (including, e.g., using <ul><li>... instead of divs)
If your items would've had a fixed height, and not a maximum, you could've used nth-child to predict at which item it will start to overflow.
Sample | Code
.item{
height: 75px;
border: 1px solid blue;
overflow: auto;
}
.item:nth-child(1n+4){ /* 4th element and up */
display: none;
}
.list{
max-height: 280px;
border: 1px solid red;
overflow: hidden;
}
However, since they aren't fixed heights, the only solution for such dynamics is using javascript.
On that note, here's a javascript solution.
Sample | Code
Javascript
var eList = document.getElementById("list"),
eItems = eList.getElementsByTagName("div"),
iMaxHeight = parseInt(getStyle(eList, "max-height")),
iSumHeight = 0;
for(i = 0; i < eItems.length; i++){
var iHeight = parseInt(getStyle(eItems[i], "height"));
//Check if next item will overflow, in which case, we're going to hide it
if((iSumHeight + iHeight) >= iMaxHeight){
eItems[i].style.display = "none";
}else{
iSumHeight += iHeight;
}
}
function getStyle(el,styleProp){
if (el.currentStyle)
var y = el.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
return y;
}
HTML
<div id="list">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac. Nam venenatis, nunc sit amet elementum semper, sem purus ultrices diam, quis scelerisque elit nulla sed sapien. Vivamus urna metus, tincidunt ac accumsan et, dignissim at lorem.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquet risus, vitae suscipit tortor cursus ac.</div>
</div>
CSS
.item{
max-height: 110px;
border: 1px solid blue;
overflow: auto;
}
#list{
max-height: 290px;
border: 1px solid red;
overflow: hidden;
}
You need javascript to compute height of items, or if you want to do it just with css and you know that heights of both elements will not change, you can compute how many will fit and hide others using nth-child css selector nth-child