css: необходимо вывести блоки в 3 колонки, если блоки не влезают на панель, то добавить вертикальную прокрутку

Question

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

.panel {
    width: 300px;
    height: 150px;
    
    border: 1px solid black;
    
    overflow-y: auto;

    columns: 3;
}

.block {
    padding: 10px;
    margin-bottom: 10px;
    
    background: rgba(255, 0, 0, 0.5);
}

<div class='panel'>
  <div class='block'>Блок 1</div>
  <div class='block'>Блок 2</div>
  <div class='block'>Блок 3</div>
  <div class='block'>Блок 4</div>
  <div class='block'>Блок 5</div>
  <div class='block'>Блок 6</div>
  <div class='block'>Блок 7</div>
  <div class='block'>Блок 8</div>
  <div class='block'>Блок 9</div>
  <div class='block'>Блок 10</div>
  <div class='block'>Блок 11</div>
  <div class='block'>Блок 12</div>
  <div class='block'>Блок 13</div>
  <div class='block'>Блок 14</div>
  <div class='block'>Блок 15</div>
  <div class='block'>Блок 16</div>
  <div class='block'>Блок 17</div>
  <div class='block'>Блок 18</div>
  <div class='block'>Блок 19</div>
  <div class='block'>Блок 20</div>
  <div class='block'>Блок 21</div>
  <div class='block'>Блок 22</div>
  <div class='block'>Блок 23</div>
  <div class='block'>Блок 24</div>
  <div class='block'>Блок 25</div>
  <div class='block'>Блок 26</div>
  <div class='block'>Блок 27</div>
  <div class='block'>Блок 28</div>
  <div class='block'>Блок 29</div>
  <div class='block'>Блок 30</div>
</div>

и второй вопрос - как сделать так, чтобы блоки внутри блоков не переносились на новую колонку, а переносился весь блок целиком

P.S.

на второй вопрос вроде как ответ - break-inside: avoid;

Answer 1

разобрался - надо сверху поставить еще один блок и ему задать уже вертикальный скрол

.main {
    width: 300px;
    height: 150px;
    
    border: 1px solid black;
    
    overflow-y: auto;
}

.panel {
    columns: 3;
}

.block {
    padding: 10px;
    margin-bottom: 10px;
    
    background: rgba(255, 0, 0, 0.5);
}

<div class='main'><div class='panel'>
  <div class='block'>Блок 1</div>
  <div class='block'>Блок 2</div>
  <div class='block'>Блок 3</div>
  <div class='block'>Блок 4</div>
  <div class='block'>Блок 5</div>
  <div class='block'>Блок 6</div>
  <div class='block'>Блок 7</div>
  <div class='block'>Блок 8</div>
  <div class='block'>Блок 9</div>
  <div class='block'>Блок 10</div>
  <div class='block'>Блок 11</div>
  <div class='block'>Блок 12</div>
  <div class='block'>Блок 13</div>
  <div class='block'>Блок 14</div>
  <div class='block'>Блок 15</div>
  <div class='block'>Блок 16</div>
  <div class='block'>Блок 17</div>
  <div class='block'>Блок 18</div>
  <div class='block'>Блок 19</div>
  <div class='block'>Блок 20</div>
  <div class='block'>Блок 21</div>
  <div class='block'>Блок 22</div>
  <div class='block'>Блок 23</div>
  <div class='block'>Блок 24</div>
  <div class='block'>Блок 25</div>
  <div class='block'>Блок 26</div>
  <div class='block'>Блок 27</div>
  <div class='block'>Блок 28</div>
  <div class='block'>Блок 29</div>
  <div class='block'>Блок 30</div>
</div></div>

БЛОГ НА HUSL

css: необходимо вывести блоки в 3 колонки, если блоки не влезают на панель, то добавить вертикальную прокрутку

Ответы (1 шт):