Flex Items Not Shrinking When Window Gets Smaller

Flex items not shrinking when window gets smaller

An initial setting on flex items is min-width: auto. This means that a flex item cannot, by default, be smaller than its content.

You can override this setting with min-width: 0 or overflow with any value other than visible. Add this to your code:

.plot-col {
    min-width: 0;
}

Revised Fiddle

More info: Why doesn't flex item shrink past content size?

Why don't flex items shrink past content size?

The Automatic Minimum Size of Flex Items

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

min-width: auto
min-height: auto

...for flex items in row-direction and column-direction, respectively.

You can override these defaults by setting flex items to:

min-width: 0
min-height: 0
overflow: hidden (or any other value, except visible)

Flexbox Specification

4.5. Automatic Minimum Size of Flex
Items

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of
the min-width and min-height properties defined in CSS 2.1.

With regard to the auto value...

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

In other words:

The min-width: auto and min-height: auto defaults apply only when overflow is visible.
If the overflow value is not visible, the value of the min-size property is 0.
Hence, overflow: hidden can be a substitute for min-width: 0 and min-height: 0.

and...

The minimum sizing algorithm applies only on the main axis.
For example, a flex item in a row-direction container does not get min-height: auto by default.
For a more detailed explanation see this post:
- min-width rendering differently in flex-direction: row and flex-direction: column

You've applied min-width: 0 and the item still doesn't shrink?

Nested Flex Containers

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.

Basically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0.

Examples:

Flex item is not shrinking smaller than its content
Fitting child into parent
white-space css property is creating issues with flex

Browser Rendering Notes

Chrome vs. Firefox / Edge
Since at least 2017, it appears that Chrome is either (1) reverting back to the min-width: 0 / min-height: 0 defaults, or (2) automatically applying the 0 defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and Chrome
IE11
As noted in the spec, the auto value for the min-width and min-height properties is "new". This means that some browsers may still render a 0 value by default, because they implemented flex layout before the value was updated and because 0 is the initial value for min-width and min-height in CSS 2.1. One such browser is IE11. Other browsers have updated to the newer auto value as defined in the flexbox spec.

Revised Demo

.container {

  display: flex;

}

.col {

  min-height: 200px;

  padding: 30px;

  word-break: break-word

}

.col1 {

  flex: 1;

  background: orange;

  font-size: 80px;

  min-width: 0;   /* NEW */

}

.col2 {

  flex: 3;

  background: yellow

}

.col3 {

  flex: 4;

  background: skyblue

}

.col4 {

  flex: 4;

  background: red

}

<div class="container">

  <div class="col col1">Lorem ipsum dolor</div>

  <div class="col col2">Lorem ipsum dolor</div>

  <div class="col col3">Lorem ipsum dolor</div>

  <div class="col col4">Lorem ipsum dolor</div>

</div>

flex items not expanding or shrinking with flex-grow

There are two pieces missing in this puzzle.

You have the column widths set to flex-grow: 1. This means that flex-basis is still at its default value, auto (content-based). So the column is sized based on the image size. You can add flex-basis: 0, or just use flex: 1.
Full explanation: Make flex-grow expand items based on their original size

Flex items, by default, cannot shrink below the size of their content. Their initial setting is min-width: auto. You need to override this default with min-width: 0.
Full explanation: Why don't flex items shrink past content size?

.row {
  display: flex;
  height: 100vh;
}

.column {
  min-width: 0; /* new */
  flex: 1;      /* adjustment */
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

body {
  margin: 0;
}

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg">
  </div>
</div>

Flex item is not shrinking smaller than its content

Sometimes you need to look at all flex items (up and down the HTML structure), and check to see if they need the overflow / min-width override.

In this case, there are flex items at higher levels that still default to min-width: auto, preventing the reduction in size.

.mdc-list-item {

  flex-shrink: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

}

.mdc-list {

  display: flex;

  flex-direction: column;

}

/* RULES ADDED */

.mdc-list {

   min-width: 0;

}

.mdc-list-item__text {

  overflow: hidden;

}

.mdc-list-item__text__secondary {

  text-overflow: ellipsis;

  overflow: hidden;

}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />

<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">

  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">

    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">

      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">

        Test Item 1

        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>

      </span>

      <div class="mdc-list-item__end-detail">

        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">

          X

        </i>

      </div>

      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">

        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">

          Y

        </i>

      </div>

    </li>

    <li role="separator" class="mdc-list-divider"></li>

    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">

      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">

        Test Item 2

        <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>

      </span>

      <div class="mdc-list-item__end-detail">

        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">

          X

        </i>

      </div>

      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">

        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">

          Y

        </i>

      </div>

    </li>

  </ul>

</div>

Flexbox items not shrinking

You have 100px padding on the left and right of each item (padding: 5px 100px). That's 200px of inflexible width right off the bat. Try this method instead:

.contents div {
  border-left: 1px solid red;
  flex: 0 1 200px; /* can't grow, can shrink, start at 200px width */
  min-width: 0px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
}

revised codepen

Flex image won't shrink with screen size when container is a hyperlink

The problem has nothing to do with hyperlinks. You could wrap the image in any element (try a span or a div) and it will have the same effect as the a container.

The problem is the hierarchical structure of a flex container.

When you set an element to display: flex (or inline-flex) you establish a flex container.

Only the children of a flex container are flex items. Descendants of a flex container beyond the children are not flex items and don't accept flex properties.

Here are the three flex items:

<a href=""><img src="flash-tooltip.png"></a>
<img src="html-tooltip.png">
<img src="portables-tooltip.png">

The img in the first element is not a flex item. It is wrapped by the a element and is therefore a child of a flex item.

The two img items can shrink because of two default settings on a flex container:

flex-wrap: nowrap ~ flex items are forced to remain on a single line
flex-shrink: 1 ~ flex items are permitted to shrink to prevent them from overflowing the container

If you switch to flex-wrap: wrap and/or flex-shrink: 0 the img items will no longer shrink.

The a item does not shrink because of another default setting: min-width: auto, which means that flex items cannot be smaller than the size of their content. In this case, the a item cannot shrink below the width of the image.

You can override this setting by adding min-width: 0 to your code.

#container {

  display: flex;

}

span {

  min-width: 0;

  display: flex;

}

img {

  min-width: 0;

}

<div id="container">

  <span><img src="http://i.imgur.com/60PVLis.png"></span>

  <img src="http://i.imgur.com/60PVLis.png">

  <img src="http://i.imgur.com/60PVLis.png">

</div>

Flex-wrap is not wrapping when I reduce the window size

You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap.

body {

  font-family: arial;

}

p {

  color: white;

}

.container {

  background-color: #666;

  max-width: 800px;

  height: 200px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.item {

  padding: 10px;

  box-sizing: border-box;

}

.item1 {

  flex: 1;

  background-color: red;

}

.item2 {

  flex: 1;

  background-color: blue;

}

.item3 {

  flex: 1;

  background-color: green;

}

<div class="container">

  <div class="item item1">

    <h1>ITEM1</h1>

    <p>flex: 1</p>

  </div>

  <div class="item item2">

    <h1>ITEM2</h1>

    <p>flex: 1</p>

  </div>

  <div class="item item3">

    <h1>ITEM3</h1>

    <p>flex: 1</p>

  </div>

</div>

Flex-shrink not working as expected

flex-shrink is designed to distribute negative free space in the container.

In other words, it only works when flex items are big enough to overflow the container.

You're not having that problem here. There is no negative space. Therefore, I don't believe flex-shrink is having any effect on your layout.

flex-grow is consuming the positive free space and seems to be working fine.

You would need to set a flex-basis or add content to the items to put flex-shrink in play.

https://www.w3.org/TR/css-flexbox-1/#flex-property

Flex Items Not Shrinking When Window Gets Smaller