javascript - 使div尽可能高而不重叠

Question

我想要这样的东西:

一个主要的“包装器”div 将包含一些内联的 div。

我可以做到这一点，但我不知道如何让包装器获得尽可能多的空间，但又没有滚动条。之后我需要让这 4 个内部 div 尽可能高

我什至可以只用 CSS 实现吗？还是需要一点 JS？

Answer 1

Flex 最适合这里是适合你的 codepen

codepen

.top{
  width:100%;
  height: 30px;
  background-color: #00cdcd;
}
.container {
  display: flex;
  background-color: teal;
}
.child{
  flex: 1;
  border: 1px solid black;
}