下面是我的CSS代码：

#my_div {
    display: grid;
    grid-template-rows: 30px;
    grid-template-columns:1fr ;
    grid-gap: 0.2rem;
    grid-auto-flow: column;
    padding-bottom: 2em;
    padding-left: 2em;
}

这是一个30px高的行，其中元素（所有JQuery UI小部件）排成一行并水平排列。
当我有“太多”的元素时，它们会溢出。我希望它们减少大小，以便适合代替。
我的解决方法如下：

#my_div label {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

#my_div .ui-widget {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

有没有办法自动调整大小，而不是手动调整？