How can I prevent all of my flex-items from resizing when I resize my window?

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>

Ah, add it to the flex-items...thought I was supposed to add it to the parent container. Thank you. — WonkasWilly, Feb 23 '18 at 22:18

score 3 · Accepted Answer · answered Feb 23 '18 at 22:17

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>

Also, since you're using percentage margins on flex items, you should see this post: https://stackoverflow.com/q/36783190/3597276 — Michael Benjamin, Feb 23 '18 at 22:21

How can I prevent all of my flex-items from resizing when I resize my window?

1 Answers1