flex items not expanding or shrinking with flex-grow

Question

I'm trying to create an effect where there are multiple vertical portions of images side-by-side, and as you hover over an image that container grows while the other containers shrink to "reveal" the full image. I want the only scaling of the image to be that it fits in a browser window when it is fully "revealed".

Here is a snip of this effect without any images:

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

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

<div class="row">
  <div class="column">
  </div>
  <div class="column">
  </div>
  <div class="column">
  </div>
</div>

But now, if I leave everything the same and simply add img tags within the "column" divs, any shrinking or growing ceases completely.

* {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.row {
  flex-basis: 0;
  display: flex;
  flex-direction: row;
}

.column {
  flex-grow: 1;
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

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

<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>

I am new to CSS so I'm sure I'm just unfamiliar with some obvious concept about flexbox but all my google searches have been in vain. Any answers, directions, or learning site recommendations would be greatly appreciated.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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 items not expanding or shrinking with flex-grow

1 Answers1