html - 带分区的垂直 div

Question

我想在我的网站上创建一个具有 X 个垂直分区的页面。它们从页面的顶部到底部占据了 10vw。

这很好，但是我现在正在努力解决的问题是在那些垂直 div 中我想要部分。一些垂直 div 将包含 1 个部分，一些是 2 个，有些是三个。

This is a fiddle of what I have so far

#topics_selection-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 27px;
  bottom: 20px;
  overflow-x: auto;
  overflow-y: none;
  white-space: nowrap;
}

.topics_selection-level_container {
  display: inline-block;
  height: 99.5%;
  width: 10vw;
  margin: 0px -5px 0px 0px;
  overflow: none;
}

.topics_selection-split_cell_1 {
  background: green;
  margin: 0px;
  height: 100%;
}

.topics_selection-split_cell_2 {
  background: gray;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_3 {
  background: blue;
  margin: 0px;
  height: 50%;
}

.topics_selection-split_cell_4 {
  background: magenta;
  margin: 0px;
  height: 33%;
}

.topics_selection-split_cell_5 {
  background: orange;
  margin: 0px;
  height: 33%;
}

.topics_selection-split_cell_6 {
  background: purple;
  margin: 0px;
  height: 33%;
}

.topics_selection-level_1 {
  background: red;
}

.topics_selection-level_2 {
  background: yellow;
}

<div id="topics_selection-container">
  <div class="topics_selection-level_container topics_selection-level_1">
    <div class="topics_selection-split_cell_1"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_2"></div>
    <div class="topics_selection-split_cell_3"></div>
  </div>
  <div class="topics_selection-level_container topics_selection-level_2">
    <div class="topics_selection-split_cell_4"></div>
    <div class="topics_selection-split_cell_5"></div>
    <div class="topics_selection-split_cell_6"></div>
  </div>
</div>

如您所见，它有效!这正是我想要的(除了三个底部的小空间因为 33%)。然而，当我将内容放入那些较小的部门时，你会发生一些不同的事情。换行到文本大小的那种。

有人可以建议如何解决这个问题吗？定位是 CSS 不是我的强项!

Answer 1

在.topics_selection-level_container中将overflow: none;更改为overflow: hidden;。这样就可以了。

.topics_selection-level_container { display: inline-block; height: 99.5%; width: 10vw; margin: 0px -5px 0px 0px; overflow: hidden; }

https://jsfiddle.net/48tvezgv/4/