Solution 1 :

You can rely on the wrap feature and your element will automatically move to another column than no one can see.

Resize the following example and see:

.flex-column {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap; /* this is important */
  height:200px;
  overflow:hidden; /* this one too */
  resize:vertical;
  border:1px solid red;
}
.flex-column *{
  height:25px;
  flex-shrink:0;
  border:2px solid green;
  width:100%; /* and especially this one */
  box-sizing:border-box;
}
<div class="flex-column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>

Solution 2 :

If you leave your container with an auto height, it resizes to fit however many rows you add. If your container has a fixed height, you can use :last-of-type to target and hide your last row:

.flex.column{
   display:flex;
   flex-direction: column;
   border: solid 1px #aa2233;
}

.row{
  height: 20px;
  border: solid 1px #333;
  box-sizing:border-box;
}

.sized{
   height: 110px;
   overflow:hidden;
}

.sized .row:last-of-type{
  display:none;
}
<h2>Auto Height</h2>
<div class="flex column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>

<h2>Fixed Height</h2>
<div class="flex column sized">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>

Problem :

This was quite challenging to explain in the title. I have a div which has display of flex and flex-direction of column, with many rows in it:

<div class="flex column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    //etc
</div>

Each row is say 20px high and the container has overflow hidden. Unless the height of the container is a multiple of 20, there is a partially visible row left.

What I would like to accomplish is for the CSS to make the row heights automatically tall enough to the last semi-visible row can no longer be seen and so that the new row height in px divides exactly in to the height of the parent container.

Can this be accomplish with pure CSS?

Another option I could accept is just the CSS automatically hiding the last row which is right now partially visible

Here is a codepen of the problem: https://codepen.io/random33443/pen/WNQBQOy

Comments

Comment posted by Paul

Please provide a minimal example as a snippet we can play with. That would be much easier. 🙂

Comment posted by isherwood

Is there always just one partial and/or hidden row? I assumed a flexible height scenario. The answer is probably not, though. A bit of JavaScript would round your container height or hide rows.

Comment posted by Fachtna Simi

I have added a codepen. Thank you

Comment posted by codepen.io/gc-nomade/pen/rNOgOKB

CSS won’t really be able to do this, javascript can : fork

Comment posted by Fachtna Simi

This is ingenious.

Comment posted by Fachtna Simi

Thanks but this doesn’t quite solve it because it will hide the last row even if the last row doesn’t need to be hidden – e.g. if height is 100px and row height is 20px then rows fit exactly into the container.

Comment posted by symlink

@FachtnaSimi I don’t think you can do this without javascript. You need to be able to use division on a dynamic height.

By

Leave a Reply

Your email address will not be published. Required fields are marked *