Ширина: наследовать/100% дочернего элемента ⇐ CSS

[Anonymous]

Я хочу разместить боковую панель поверх изображения той же ширины, что и изображение. Ни одна ширина: наследовать | 100 % работает.
CSS

Код: Выделить всё

       body {
display: flex;
}

#main-pic {
width: 40%;
height: 700px;
}

#main-pic>img {
width: 100%;
height: 100%;
}

#logo-holder {
width: inherit;
height: 100px;
background-color: brown;
position: absolute;
top: 50%;
}

HTML

Код: Выделить всё

[img]myFlower.JPG[/img]



This is the part for text

В этом примере я использую width: inherit, #logo-holder немного длиннее изображения. Я попробовал ширину: 100%, она растягивается по всему браузеру. Может кто-нибудь объяснить и предложить решение?

Подробнее здесь: https://stackoverflow.com/questions/783 ... of-a-child