Prevent Flexbox Shrinking

Prevent flexbox shrinking

Try setting the flex-shrink property to 0 on the .flex-box.

How to prevent flexboxes from shrinking?

just add flex-shrink:0 to your element and the flexbox will stop shrinking.

<div class="flx">
    Some Content
</div>

<div class="flx">
    Some Content
</div>

<style>
    .flx{
        display: flex;
        flex-shrink: 0;
    }
</style>

How to prevent a flex item from shrinking smaller than its content?

You should be able to achieve the Firefox behavior in Chrome by adding min-width: -webkit-min-content; to .flexCol3. This prevents it from shrinking below its min-content width. (This is what's supposed to happen by default, due to min-width:auto introduced in the flexbox spec, but that hasn't been implemented in Chrome yet.)

As noted in comments below, IE doesn't seem to have a min-content width keyword implemented, so you might have to do something hackier there (like min-width: 250px). Fortunately, IE's next release (12?) does have min-width:auto implemented, so this should Just Work like Firefox there, I'm told.

Keep same icon size with flex box responsive

Simply apply flex-shrink: 0; to the icons, this prevent them from getting smaller.

Note that you should have width for those icons.

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

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>

Prevent flex items from overflowing a container

Your flex items have

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */

That means:

The <aside> will start at 200px wide.
Then it won't grow nor shrink.
The <article> will start at the width given by the content.
Then, if there is available space, it will grow to cover it.
Otherwise it won't shrink.

To prevent horizontal overflow, you can:

Use flex-basis: 0 and then let them grow with a positive flex-grow.
Use a positive flex-shrink to let them shrink if there isn't enough space.

To prevent vertical overflow, you can

Use min-height instead of height to allow the flex items grow more if necessary
Use overflow different than visible on the flex items
Use overflow different than visible on the flex container

For example,

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  min-height: 50px; /* min-height instead of height */
}
main {
  display: flex;
}
aside {
  flex: 0 1 200px; /* Positive flex-shrink */
}
article {
  flex: 1 1 auto; /* Positive flex-shrink */
}

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

Prevent Flexbox Shrinking