Div 使用 window 缩放，但 div 缩放不同

Question

我完全是 css 的菜鸟，我正在努力学习，但我遇到了瓶颈。我有一个 div 容器，里面有 2 个 div。我希望能够使左侧 div 调整大小比右侧 div 慢。

EX：全屏

----|--------

EX: window 缩小

---|-----

我希望右边 div 在左边 div 开始缩小之前缩小到至少 200 像素。

这是我目前拥有的，但它不起作用

.container{
  position: relative;
  border: 3px solid black;
  border-radius: 10px;
  height: 60px;
  max-width: 900px;
  min-width: 400px;
  margin: 10px;
}

.left{
  position: absolute;
  height: inherit;
  max-width: 200px;
  min-width: 100;
  float: left;
}

.right{
  position: absolute;
  height: inherit;
  max-width: 900px;
  min-width: 400px;
  left: 200px;
}

<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
</div>

Answer 1

我认为最好的方法是使用 flexbox 并在左侧添加 max-width div 并在右侧添加 min-width。

这是关于所有 flexbox 的很好的指南 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and the MDN link 完整规格。

.container {
  display: flex;
  width: 100%;
}

.left {
  flex: 1 1 0;
  height: 50px;
  background: green;
  max-width: 200px;
}

.right {
  flex: 1 1 0;
  height: 50px;
  background: red;
  min-width: 200px;
}

<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
</div>

Div 使用 window 缩放，但 div 缩放不同

Div scaling with window but the divs scale differently

html

css