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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With