CSS flexbox overflow 100% width elements

Question

On mouse over, I want to transform the position of two flex element that are sitting next to each other as per the image below

The markup is as follows

<div class="container">
  <div class="element">Normal</div>
  <div class="element">Hover</div>
</div>

I want both elements to be 100% width of the parent and the second element to overflow so I can transform X on mouse over. The problem I'm having is both elements get squeezed in to the container.

I know I can wrap the two elements in another div and give it 200% width of container. But want to know if this can be done with flexbox

Michael Benjamin · Accepted Answer · 2017-11-23T02:41:32.220

7

.container {
  display: flex;
  width: 200px;
  overflow: hidden;           /* hides the flex item parked outside the container */
  cursor: pointer;
  border: 1px solid black;
}

.element {
  height: 100px;
  flex: 0 0 100%;            /* can't grow, can't shrink, fixed an 100% width */
  transition: .5s;
  min-width: 0;              /* override min-width: auto default;
                                https://stackoverflow.com/q/36247140/3597276 */
}

.container:hover > .element:first-child {
  flex-basis: 0;
}

.element:first-child { background-color: lightgreen; }
.element:last-child  { background-color: orange; }

<div class="container">
  <div class="element">Normal</div>
  <div class="element">Hover</div>
</div>

You wrote:

The problem I'm having is both elements get squeezed in to the container.

That was probably because flex items are set, by default, to flex-shrink: 1, meaning they are permitted to shrink in order to fit inside the container. In my answer flex-shrink is set to 0.

edited Nov 23 '17 at 02:41

answered Nov 23 '17 at 02:35

Michael Benjamin

346,931
104
581
701

What I missed was flex: 0 0 100%; and your comment explains the reason perfectly. I've modified the code to the way I wand the transition. Additionally, min-width:0; in this context is something I never knew about. I was always wondering how to get an elements to shrink below it's content. Why do you have the height: 100px; on element? Why can't both height and width be on container? – ibex Nov 23 '17 at 04:27
1

@ibex Normally height/width is based on the items, unless they should be restricted in some way, and of course both height/width can be on container. – Asons Nov 23 '17 at 07:46
1

Michael_B, using `transform: translate` will perform better, not squeeze any content in first child _and_ work in IE as well :) ... https://jsfiddle.net/o2bx6bf9/ – Asons Nov 23 '17 at 07:51
The `height: 100px` on the item was just for demo purposes. As mentioned by @LGSon, in flex layout the items normally receive the sizing. But again, this is just a simple demo. Use the container to set the dimensions if you want. – Michael Benjamin Nov 23 '17 at 11:09
1

@LGSon, good revision. I had tested my answer in Edge (where it works) but not IE11 (where I now see it doesn't work). Thanks. – Michael Benjamin Nov 23 '17 at 11:11

CSS flexbox overflow 100% width elements

1 Answers1