CSS flexbox overflow 100% width elements - html

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

Answer 1

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