Задать размеры всплывающего дочернего элемента , каким образом?

Есть примерно такой код на странице:

<div>
    <div class="col-sm-4">
        <ul class="tt-list" style="position: relative;">
            <li class="tt-item">
                <div class="tt-submenu"  style="position: absolute; right: 0px; top: 0px; width: ???;">
                    <div class="tt-content">
                    </div>
                </div>
            </li>
            <li>...</li>
            ...
        <ul>
    </div>
    <div class="col-sm-8">
    </div>
</div>

используется bootstrap.
Чтобы было понятно, это реализация меню.

При наведении на li.tt-item становится активными дочерние DIV'ы, как сделать так, чтобы они заняли максимум <div class="col-sm-8">???
Другими словами задать width в зависимости от ширины col-sm-8, а height в зависимости от наполненности...
Если поняли о чем речь!

На данный момент пока только 1 вариант решения проблемы, jQuery, но вот интересно, всё же есть вариант как это решить с помощью CSS?

ViGOur, выкинь всю страницу HTML+CSS. Ниче не обещаю, но так глядеть проще.

Может, так?

left: 100%; top: 0; width: 200%;

AVA12, в точку!
Выровнялись по ширине, а по высоте как-то можно?

Понятно, что height: 100%, но при этом будет артефакт, когда дочка больше родителя и вылезает за его пределы (в данном случае за пределы корневого div), со всеми вытекающими...

з.ы. я полный ноль в CSS, так что извините если вопросы примитивные...

Сообщение отредактировано: ViGOur - 28.04.20, 12:16

Цитата

Понятно, что height: 100%, но при этом будет артефакт, когда дочка больше родителя и вылезает за его пределы

Что за артефакт? Что рисуется и что должно рисоваться? Продемонстрируй проблему. Ну или опиши словами, как все сверстано и как должно выглядеть и работать.

Прикреплённый файлmenu_example_art_0.jpg (97,97 Кбайт, скачиваний: 719)
Пример на прикрепленной картинке...

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

max-height: 100%; overflow: auto;

Впрочем, могут быть сюрпризы в зависимости от реально используемых стилей для всего этого.

overflow: auto; я пробовал до этого.
Из-за этого scroll появляется, а мне хотелось бы сделать так, чтобы родитель становился такого же размера как дочка, это же меню, потому, для него в самый раз!

Просто решаемо

Меню контейнер (Граница куда максимом можно) - позиция релатив (или абсолютная) (Главный див в примере)
В каждом tt-item сделать ещё div для надписи (ширина 33%)
tt-submenu тогда получаеться так - top: 0, left: 33%, bottom: 0, right: 0

Пример тут - https://jsfiddle.net/v6f3c8at/1/

Сообщение отредактировано: SergeS - 19.05.20, 21:24