調整窗口大小時，如何防止所有彈性項目調整大小？

Question

單擊按鈕生成內容后，我嘗試在flex容器上使用以下內容，但是當我調整窗口大小時，它會不斷調整項目大小。 我希望它們具有固定的寬度和高度（理想情況下，每個項目都是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>