如何在屏幕CSS中缩放适合高度固定大小的孩子，仅允许使用JavaScript

Question

I have two child with fixed size:

<div class="parent">
  <div class="static_child">
  </div>
  <div class="static_child">
  </div>
</div>

.parent {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.static_child {
  border: 1px solid red;
  width: 600px;
  height: 200px;
}

I need to make this children responsive so they fit/fill the screen.

I can't change their fixed size.

I need to have both child to appear on the screen, by scaling down. They should respond to bigger screen by growing appropriately.

http://codepen.io/eguneys/pen/zGbqqB

Answer 1

I'm not sure if I'm reading your question right, but you could change the width: 600px to width: 100% . This way the width of your blocks will stretch to accommodate various screen sizes. The same does not seem to work for the height though. Hope this helped.