为什么在这个简单的测试用例网页中，flex子元素没有收缩？

Question

我有一个运行完美的网页，当浏览器窗口宽度减小时，在 ResizeObserver 的帮助下调整了子画布元素（带有兔子的棋盘）的大小，同时保持其 1:1 的纵横比：

然后我在该页面的所有元素周围添加了一个“horizontalFlexContainer”div 元素，这样我就可以在左侧添加一个包含 4 个条目的灰色菜单。

不幸的是，这导致了当浏览器宽度减小时“verticalFlexContainer”拒绝缩小的问题：

这是我的问题 keep-aspect-ratio.html 使用 main.css

请问大家有什么建议，是什么让“抵抗力”突然变小了？

  const parentElement = document.getElementById("parent");
  const childElement = document.getElementById("child");

  const app = new PIXI.Application({
    backgroundColor: 0xccffcc,
    width: 800,
    height: 800,
    view: childElement,
  });

  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const { width, height } = entry.contentRect;
      const minDimension = Math.min(width, height);

      // maintain the 1:1 aspect ratio of the child element
      childElement.style.width = `${minDimension}px`;
      childElement.style.height = `${minDimension}px`;
    }
  });

  resizeObserver.observe(parentElement);

  const background = new PIXI.Graphics();
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      if ((i + j) % 2 == 0) {
        background.beginFill(0xccccff);
        background.drawRect(i * 100, j * 100, 100, 100);
        background.endFill();
      }
    }
  }
  app.stage.addChild(background);

  const texture = PIXI.Texture.from("https://pixijs.com/assets/bunny.png");
  const bunny = new PIXI.Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.x = 50;
  bunny.y = 50;
  bunny.width = 100;
  bunny.height = 100;
  app.stage.addChild(bunny);

html,
body,
h3,
ul {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

nav a.active {
  color: red;
}

div.horizontalFlexContainer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

div.verticalFlexContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100vh;
}

/* the parent contains: just the canvas element, which observes the parent dimensions */
div.parent {
  border: 4px solid red;
  flex: 1;
  /* center the only child element: the canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  /* prevent the canvas child disrupting the layout */
  overflow: hidden;
}

canvas.child {
  background-color: yellow;
  border: 4px green dotted;
  /* draw the border inside of the canvas element */
  box-sizing: border-box;
}

div.hint,
div.status {
  background: lightblue;
  font-style: italic;
  text-align: center;
}

<script src="//cdn.jsdelivr.net/npm/pixi.js-legacy@7/dist/pixi-legacy.min.js"></script>

<div class="horizontalFlexContainer">
  <div style="background: lightgrey">
    <h3>Select a game!</h3>
    <nav>
      <ul>
        <li>Game 1</li>
        <li>Game 2</li>
        <li>Game 3</li>
        <li>Game 4</li>
      </ul>
    </nav>
  </div>
  <div style="flex-grow: 1">
    <div class="verticalFlexContainer">
      <div class="status">Game #1 Score1:Score2</div>
      <div class="parent" id="parent">
        <canvas class="child" id="child"></canvas>
      </div>
      <div class="hint">A game hint to do this and that...</div>
    </div>
  </div>
</div>

Answer 1

#child { max-width: 100% }

：

const parentElement = document.getElementById("parent");
  const childElement = document.getElementById("child");

  const app = new PIXI.Application({
    backgroundColor: 0xccffcc,
    width: 800,
    height: 800,
    view: childElement,
  });

  const resizeObserver = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const { width, height } = entry.contentRect;
      const minDimension = Math.min(width, height);

      // maintain the 1:1 aspect ratio of the child element
      childElement.style.width = `${minDimension}px`;
      childElement.style.height = `${minDimension}px`;
    }
  });

  resizeObserver.observe(parentElement);

  const background = new PIXI.Graphics();
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      if ((i + j) % 2 == 0) {
        background.beginFill(0xccccff);
        background.drawRect(i * 100, j * 100, 100, 100);
        background.endFill();
      }
    }
  }
  app.stage.addChild(background);

  const texture = PIXI.Texture.from("https://pixijs.com/assets/bunny.png");
  const bunny = new PIXI.Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.x = 50;
  bunny.y = 50;
  bunny.width = 100;
  bunny.height = 100;
  app.stage.addChild(bunny);

html,
body,
h3,
ul {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

nav a.active {
  color: red;
}

div.horizontalFlexContainer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

div.verticalFlexContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100vh;
}

/* the parent contains: just the canvas element, which observes the parent dimensions */
div.parent {
  border: 4px solid red;
  flex: 1;
  /* center the only child element: the canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  /* prevent the canvas child disrupting the layout */
  overflow: hidden;
}

canvas.child {
  background-color: yellow;
  border: 4px green dotted;
  /* draw the border inside of the canvas element */
  box-sizing: border-box;
  max-width: 100%;
}

div.hint,
div.status {
  background: lightblue;
  font-style: italic;
  text-align: center;
}

<script src="//cdn.jsdelivr.net/npm/pixi.js-legacy@7/dist/pixi-legacy.min.js"></script>

<div class="horizontalFlexContainer">
  <div style="background: lightgrey">
    <h3>Select a game!</h3>
    <nav>
      <ul>
        <li>Game 1</li>
        <li>Game 2</li>
        <li>Game 3</li>
        <li>Game 4</li>
      </ul>
    </nav>
  </div>
  <div style="flex-grow: 1">
    <div class="verticalFlexContainer">
      <div class="status">Game #1 Score1:Score2</div>
      <div class="parent" id="parent">
        <canvas class="child" id="child"></canvas>
      </div>
      <div class="hint">A game hint to do this and that...</div>
    </div>
  </div>
</div>