alexalexes

Можно честно спиратить из vk.com плашку "Новые сообщения".

<h4 class="im-page--history-new-bar _im_unread_bar_row">
:before
<span>Новые сообщения</span>
:after
</h4>

Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.

<style>
    div.container
    {
      display: flex;
      flex-wrap: wrap;
      width: 770px;
      height: 90px;
      background-color: green;
      overflow: hidden;
    }
    div.container > div
    {
      width: 60px;
      height: 25px;
      background-color: #df1245;
      text-align: center;
      margin: 5px;
      padding: 5px 0;
    }
    div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
    {
      order: 2;
    }
    div.container > label.more
    {
      display: block;
      width: 130px;
      height: 25px;
      margin: 5px;
      padding: 5px 0;
      text-align: center;
      order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
      background-color: #78d412;
    }
    div.container label.more span.less
    {
      display: none;
    }
    #show-more-state
    {
      display: none;
    }
    #show-more-state:checked ~ div.container
    {
      height: auto;
    }
    #show-more-state:checked ~ div.container label.more
    {
      order: 3;
      margin-left: auto;
    }
    #show-more-state:checked ~ div.container label.more span.more
    {
      display: none;
    }
    #show-more-state:checked ~ div.container label.more span.less
    {
      display: initial;
    }
  </style>
  <input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
  <div class="container">
    <label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
    <div>ITEM</div>
  </div>

CSS свойство элемента overflow дробится на overflow-x и overflow-y.
Подрегулируйте свойство overflow-x или overflow-y у контейнера .table__wrap

Чтобы оставить возможность прокручивать контейнер, но не отображать сами полосы.
Есть определенные CSS-хаки, но они специфичны для каждого браузера: https://qna.habr.com/q/18012

Можно воздействовать на конкретный селектор в уже отрендеренных стилях CSS.
document.styleSheets[i].rules[j].selectorText
Но проблема в том, что нужно пробежаться по всем стилям (i - счетчик), в каждом стиле просмотреть текст у селектора (j - счетчик).
Если такой найден, то изменить свойство.

document.styleSheets[i].rules[j].style['имя_свойства'] = значение_свойства;

Подробнее:
https://www.w3.org/wiki/Dynamic_style_-_manipulati...

</li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
      <li class="modules-card layout">

Часто такой эффект выявляется, когда используется display: inline-block.
Выход - не переносить li элементы (и не оставлять пробелы), или нивелировать размер текстовых нод с помощью css.

Вместо строчки 42:

$('select').val(chooseItem).attr('selected', 'selected');

Используйте:

$('select option[selected]').removeAttr('selected'); // удаление ранее установленного selected атрибута у одного из option
  $('select option[value="' + chooseItem + '"]').attr('selected', 'selected'); // находим option с нужным value и устанавливаем атрибут selected

1. Определяете список заголовков.
2. Определяете offsetTop у каждого заголовка.
3. Определяете scrollTop у прокручиваемого блока.
5. Определяете по offsetTop-ам i-ый и i+1 заголовок, где находится значение scrollTop.
6. Для стрелки вверх делаете scrollTo до i-ого заголовка.
7. Для стрелки вниз делаете scrollTo до i+1 заголовка.
8. Если i-ого или i+1 заголовка нет, то гасите кнопку.
9. На событии скроллинга нужно анализировать пункты 1-8, чтобы кнопки вовремя гасились.

Есть старый добрый тег nobr, который объединяет подстроку, переносимую полностью.
№<br/><nobr>п/п</nobr>

Решение без JS:
Принцип действия: Над кнопкой показа меню добавляется скрытый чекбокс, который выступает как триггер состояния. Состояние чекбокса управляет применяемым css правилом на меню.
Кнопку "Server systems development" и скрываемое меню делаете в одном контейнере top-left-container.
На том же уровне, где находится меню делаете прозрачный input type="checkbox" над кнопкой "Server systems development".
Вывод и скрытие меню задаете примерно такими правилами:

div.top-left-container input[type="checkbox"]:checked ~ div.menu
{
/*анимация появления меню*/
}
div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
{
/*анимация скрытия меню*/
}

Решение c JS:
Вешаете обработчик на кнопку Server systems development, проверяете наличие класса отображения на меню. Если нет класса, то добавляете, если есть то убираете (в Jquery будет использоваться функция toggle).

Вам нужно определиться, какую цель вы преследуете при выборе свойства font-size.
1. Физический размер элемента не должен отличаться или малозависим от настроек браузера устройства.
Решение: используем физические величины: mm, cm, in.
2. Размер элемента должен быть всегда столько-то пикселей. Используем px.
3. Размер шрифта должен адаптироваться под возможности комфортного отображения на устройстве.
Используем pt, em, %. В этом случае тестируете разные режимы адаптивности сайта: у пользователя может отличаться размер экрана, плотность пикселей, он может крутить масштаб скажем, от 60% до 150%.
На разработчика ложится это обязанность, чтобы сайт выглядел приемлемо, в разумных изменениях настроек отображения.
Могу путать величины CSS, но такие цели точно есть, и они взаимоисключающие.

Эксплуатация свойства position: sticky; и его заменителей.
Можно ли использовать position: sticky?

Начало всех CSS-файлов всегда начинается одинаково как раз из за этого случая:

html, body
{
  margin: 0;
  padding: 0;
}

Пробовали?
https://sourceforge.net/projects/qsseditor/