Div scaling with window but the divs scale differently-CodePudding

I'm a complete noob at css and I'm trying to learn, but I've hit a wall. I have a div container with 2 divs inside of it. I want to be able to make the left div resize slower than the right div.

EX: Fullscreen

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

EX: window shrunk

---|-----

I'd like the right div to shrink to a minimum of 200px before the left div starts to shrink.

Here's what I have so far but It's not working

.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>

CodePudding user response：

I think the best way to do this is using flexbox and adding max-width on your left div and min-width on your right.

This is a great guide for all things flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and the MDN link for full specs.

.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>