css - 如何使用无限宽度的第二个 DIV 创建 2 列布局

Question

如何在不复杂使用 position:absolute 的情况下使用 CSS 创建这种布局 (寻找简单的方法)。还要考虑页面的“响应能力”。

有什么想法吗？

谢谢

Answer 1

查看这篇文章，了解为什么 Flexbox 是最好的:http://uidevdaily.com/2018/why-you-should-start-using-flexbox/ .我做了一个 Jsfiddle 来回答你的问题:https://jsfiddle.net/q6ac134L/13/ .下面是 CSS 代码:

div {
  height: 100vh;
}

.main-container {
  display: flex;
}

.col-1 {
  background-color: green;
  flex-basis: 100px;
}

.col-2 {
  background-color: gray;
  flex: 1;
}