Edit in JSFiddle

Ширина элементов установлена через: 
<input type="radio" name="key" id="basis" checked><label for="basis">flex-basis</label>
<input type="radio" name="key" id="width"><label for="width">width</label>
<input type="radio" name="key" id="maxwidth"><label for="maxwidth">max-width</label>

<br><br>

<div class="flex">
	<div class="item">
		Элемент с большим блоком внутри, который при наведении должен растянуться и вылезти за пределы самого элемента.
		<div class="wide">Наведи на меня...</div>
	</div>
	<div class="item">2</div>
</div>
body{ font-family:arial; padding:20px; }
input{ display:none; }
label{ padding:.2em .5em; }
label:hover{ background:#ccc; cursor:pointer; }
input:checked + label{ font-weight:bold; background:#ccc; }

.flex{
	display: flex;
	
	max-width: 600px; /* макс ширина блока */
	margin: 0 auto; /* выравниваем блок по центру */
	
	border:1px solid red; border-top:0;border-bottom:0; padding:1em; box-sizing:border-box; /* обоозначим границы */
}
.item{ padding:20px; background:#b5ced8; border-radius:5px; }
.item:nth-child(1){ flex:0 1 70%; margin-right:10px; z-index:2; }
.item:nth-child(2){ flex:0 1 30%; text-align:center; font-size:400%; z-index:1; }

.wide{ background:rgba(255,255,255,.5); margin:1em 0; padding:1em; box-sizing:border-box; width:300px; transition:width 500ms; }
.wide:hover{ width:500px; }

#width:checked ~ .flex .item:nth-child(1){ width:70%; }
#width:checked ~ .flex .item:nth-child(2){ width:30%; }

#maxwidth:checked ~ .flex .item:nth-child(1){ max-width:70%; }
#maxwidth:checked ~ .flex .item:nth-child(2){ max-width:30%; }