Completely hidden block elements that do not fully fit into the visible part of their parent element

Question

Suppose I have three block elements in a container. The black line indicates the container. Blue squares are the three elements of a block inside it.

These three elements do not quite fit. If I installed overflow: hiddenon an external element, I will see the two upper elements and partially the third.

What I would like is to display only those elements that are fully included in the container.

Is this possible with CSS?

Answer 1

Yes, this is possible Flexbox, you need to install flex-direction: column, flex-wrap: wrapas well overflow: hidden.

calc(100% - margin) flex-childs, , , , overflow: hidden .

* {
  box-sizing: border-box;
}
.container {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
}
.box {
  flex: 0 0 70px;
  width: calc(100% - 10px);
  margin: 5px;
  background: #46A1FF;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>