调整窗口大小时，如何防止所有弹性项目调整大小？

Question

I have tried using the following on my flex-container after clicking on my button to generate the content, but when I resize the windows, it keeps resizing my items. I want them to have a fixed width and height (ideally each item would be a square of 100x100 px)

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

An initial setting on flex items is flex-shrink: 1 . That means that items can shrink to avoid overflowing the container. Add flex-shrink: 0 to the items and you're all set.

 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>