Make div in flexbox grow on hover

Question

I'm trying to implement a view that displays three columns. When the user hovers over one of them it should grow at expense of the others. I have a few requirements:

• I want each column to have a background image and it should not move when the column is resized.
• There should be a smooth transition when columns grows/shrinks
• It should work in at least Safari, Firefox and Chrome

I would also like to have each column separated by diagonal line if possible. This is what the end result should look like:

I have basic functionality working, but I've run into several problems:

• I've not managed to get the background image to be fixed on the parent div
• Transitions does not work in Safari
• In the real context, which is a website based on Bootstrap, the background image moves by a pixel or two seemingly by random on Safari and Chrome.
• I've tried to achieve the diagonal lines using clip-path, but it does not work in Safari and very poorly in Chrome
• When changing column from the second to the third the first column is resized a bit
• In Chrome the rightmost pixel column flickers while growing/shrinking

Any hints appreciated!

Here's my current code:

.content {
  display: flex;

  border: 1px solid #f00;
  background: #fbb;
  padding: 10px;
  height: 800px;
  color: #fff;
}

.col {
  flex-grow: 1;
  flex-basis: 0;
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;

  border: 1px solid #0f0;
  padding: 10px;
}

.col:hover {
  flex-grow: 5;
  transition: flex-grow .3s;
  -webkit-transition: flex-grow .3s;
}

.col1 {
  background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-attachment: fixed;
}

.col2 {
  background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-attachment: fixed;
}

.col3 {
  background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-attachment: fixed;
}

<div class="content">
  <div class="col col1">
    <h1>Foo!</h1>
  </div>
  
  <div class="col col2">
    <h1>Bar!</h1>
  </div>
  
  <div class="col col3">
    <h1>Brovinkel!</h1>
  </div>
</div>

Answer 1

With transform: skew() one can tilt the items.

As that will create an unfilled upper left and lower right area, widen the left/right will cover that.

Finally we then revert that skew for text/image, where I used a pseudo for the image.

Stack snippet

.content {
  display: flex;
  height: 400px;
  color: #fff;
  overflow: hidden;
  border: 5px solid #f00;
  background: lime;
}

.col {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  flex-basis: 0;
  transition: flex-grow .3s;

  transform: skew(-20deg, 0);
  background: yellow;
}

.col + .col {
  border-left: 10px solid #0ff;
}

.col:first-child {
  margin-left: -100px;
}
.col:last-child {
  margin-right: -100px;
}

.col::before {
  content: '';
  position: absolute;
  height: 100%;
  width: calc(100% + 200px);
  margin-left: -100px;
  display: block;
  background-attachment: fixed;
  transform: skew(20deg, 0);
}

.col:hover {
  flex-grow: 3;
  transition: flex-grow .3s;
}

.col1::before {
  background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}

.col2::before {
  background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}

.col3::before {
  background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}

.col h1 {
  margin: 0;
  padding: 10px;
  transform: skew(20deg, 0);
}

.col:first-child h1 {
  margin-left: 40px;
}

<div class="content">
  <div class="col col1">
      <h1>Foo!</h1>
  </div>
  
  <div class="col col2">
      <h1>Bar!</h1>
  </div>
  
  <div class="col col3">
      <h1>Brovinkel!</h1>
  </div>
</div>