javascript - 当我调整窗口大小时，如何防止我所有的 flex 元素调整大小？

Question

单击我的按钮生成内容后，我尝试在我的 flex-container 上使用以下内容，但是当我调整窗口大小时，它会不断调整我的元素的大小。我希望它们具有固定的宽度和高度(理想情况下，每个元素都是 100x100 像素的正方形)

flex-shrink: 0;
flex-grow: 0;

const sampleContent = ["stuff1", "stuff2", "stuff3", "stuff4", "stuff5"]
const button = document.querySelector(".content");
const rootElement = document.querySelector("#root");
const widthDiv = document.querySelector("#width-value");
const resultContainer = document.querySelector("#root");
const widthValue = window.getComputedStyle(resultContainer, null).getPropertyValue("width");
button.addEventListener("click", () => {
	sampleContent.forEach((content) => {
  const newDiv = document.createElement("div");
  console.log(newDiv);
  newDiv.textContent = content;
  newDiv.classList.add("result");
  rootElement.appendChild(newDiv);
  })
})
widthDiv.textContent = widthValue;

.result-container {
  display: flex;
  width: 60%;
  height: 200px;
  border: 1px black solid;
  flex-wrap: nowrap;
}
.container {
  display: flex;
  justify-content: center;
}
.result {
  width: 100px;
  height: 100px;
  border: 1px dotted pink;
  margin: 1%;
}

<div class="container">
  <div id="root" class="result-container">
  
  </div>
</div>

  <button class="content">
    Generate Content from API
  </button>
  <div id="width-value">
  </div>

Answer 1

flex 元素的初始设置是 flex-shrink: 1。这意味着元素可以收缩以避免溢出容器。将 flex-shrink: 0 添加到元素中，一切就绪。

const sampleContent = ["stuff1", "stuff2", "stuff3", "stuff4", "stuff5"]
const button = document.querySelector(".content");
const rootElement = document.querySelector("#root");
const widthDiv = document.querySelector("#width-value");
const resultContainer = document.querySelector("#root");
const widthValue = window.getComputedStyle(resultContainer, null).getPropertyValue("width");
button.addEventListener("click", () => {
  sampleContent.forEach((content) => {
    const newDiv = document.createElement("div");
    console.log(newDiv);
    newDiv.textContent = content;
    newDiv.classList.add("result");
    rootElement.appendChild(newDiv);
  })
})
widthDiv.textContent = widthValue;

.result-container {
  display: flex;
  width: 60%;
  height: 200px;
  border: 1px black solid;
  flex-wrap: nowrap;
}

.container {
  display: flex;
  justify-content: center;
}

.result {
  flex: 0 0 100px;
  /* fg: 0, fs: 0, fb: 100px */
  /* width: 100px; */
  height: 100px;
  border: 1px dotted pink;
  margin: 1%;
}

<div class="container">
  <div id="root" class="result-container"></div>
</div>
<button class="content">Generate Content from API</button>
<div id="width-value"></div>