Развернуть размер дочерних элементов за пределами родителей

Question

Я пытаюсь расширить три div с фиксированными высотами вне родительского div, который охватывает всю ширину. Но я хочу, чтобы они расширялись за пределами родительской высоты, а не ширины.

Похожа на картинке ниже:

Что бы лучший способ сделать это?

Вот базовый HTML-код для него.

<div class="background"> 
    <div class="container"> 
     <div class="one">1</div> 
     <div class="two">2</div> 
     <div class="three">3</div> 
    </div> 
</div> 

Answer 1

Вот один подход.

Применить transform: scaleY(1.2) к элементу .container и сместить масштабирование, добавив transform: scaleY(0.8) к элементам children.

Example Here

.background { 
 
    background: #000; 
 
    height: 100px; 
 
    margin: 1em 0; 
 
} 
 
.container { 
 
    transform: scaleY(1.2); 
 
    height: inherit; 
 
} 
 
.container > div { 
 
    width: 28%; 
 
    height: 100%; 
 
    background: #f88; 
 
    margin: 0 2.6666667%; 
 
    float: left; 
 
    text-align: center; 
 
    font-size: 4em; 
 
    line-height: 100px; 
 
    color: #fff; 
 
} 
 
.container > div > .inner { 
 
    transform: scaleY(0.8); 
 
}

<div class="background"> 
 
    <div class="container"> 
 
     <div class="one"> 
 
      <div class="inner">1</div> 
 
     </div> 
 
     <div class="two"> 
 
      <div class="inner">2</div> 
 
     </div> 
 
     <div class="three"> 
 
      <div class="inner">3</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

, если я понимаю, что вы правильно спрашивать, вы можете просто сделать что-то, чтобы:

.container{ 
     overflow-y:visible; 
     overflow-x:hidden; 
}