如何在屏幕CSS中縮放適合高度固定大小的孩子，僅允許使用JavaScript

Question

我有兩個固定大小的孩子：

<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;
}

我需要讓這些孩子反應靈敏，使他們適合/填滿屏幕。

我無法更改其固定大小。

通過縮小，我需要讓兩個孩子都出現在屏幕上。 他們應該通過適當增長來應對更大的屏幕。

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

Answer 1

我不確定我是否在正確閱讀您的問題，但是您可以將width: 600px更改為width: 100% 。 這樣，您的塊的寬度將可以擴展以適應各種屏幕尺寸。 但是，對於高處來說，這似乎並不起作用。 希望這會有所幫助。