Search code examples
javascripthtmlcsspositionscale

CSS position and scale object by resolution

I'm trying to achieve this in css

How would I go about it? I couldn't make it fill the empty space on the sides, can I do it in css only (and so it works with browser zooming as well)

This is my code (simplified), since nothing was working for me I provide a raw code

<html>
<head>
    <style>        
        #parent {
            width: 1000px;
            height: 1000px;
            background-color: #0ff;
        }
        
        .child {
            width: 400px;
            height: 200px;
            margin: 20px;
            background-color: #f00;
            float: left;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

Solution

  • Use flexbox

    Fiddle demo

    #parent {
  display: flex;
  flex-wrap: wrap;
  background-color: #0ff;
}
.child {
  flex: 1 0 auto;
  width: 400px;
  height: 200px;
  margin: 20px;
  background-color: #f00;
}
    <div id="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>