Как заставить ul сжиматься до размеров родительского элемента?

Question

[aaltqna]

Есть плашка высотой 45px, внутри нее должен быть список:

<div style="height:45px">
 <ul style="display:inline-block">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
 </ul>
</div>

Вот этот список выходит за пределы родительского div. А мне нужно, чтобы он уменьшался в размере, но помещался в эти 45px. Никак не могу понять как этого достичь.

Comments

[WapSter]

Как по твоему должно это вообще выглядеть?

[aaltqna]

WapSter, обычный список (вертикальный), только уменьшенный (scale), чтобы помещаться в плашку в 45px высотой.

[aaltqna]

WapSter, при этом, если я font-size задаю, то он все равно занимает лишнее место и двигает тем самым остальные элементы в плашке, даже с margin: 0

[WapSter]

aaltqna, в нем ничего видно не будет, зачем такое делать?

[WapSter]

aaltqna, ну так все верно потому-что блокам li нужно место

[aaltqna]

WapSter, с твоим ответом, + display: flex на родительский элемент и align-items: center; получилось, чтобы он влезал и лишнего размера не имел. Но я рассчитывал, что можно это без font-size сделать, видимо нельзя.

Answer 1

[WapSter]