Как скрыть блок место его переноса на новую строку. СSS

Question

При сужении(изменении разрешения) страницы при display:inline-block, блок при отсутствии для него места переносится на новую строку, мне же нужно, что бы он при недостатке для него места пропадал.

.block-list {
    display : inline-flex;
    vertical-align: top;
    text-align: center;
    line-height: normal;
    background-color: red;
    width: 200px;
    height: 300px;
    position: relative;
 margin: 20px 15px;
}

Answer 1

Чтобы прям пропадал автоматически при недостатке, вряд ли так получится только через CSS (только если строго высчитывать и через медиа-запросы скрывать через display: none;), но Вы можете сделать так. Но тогда потребуется обертка.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  overflow: hidden;
}

.block-list {
  flex-shrink: 0;
  vertical-align: top;
  text-align: center;
  line-height: normal;
  background-color: red;
  width: 200px;
  height: 300px;
  position: relative;
  margin: 20px 15px;
}

<div class="wrapper">
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
</div>

БЛОГ НА HUSL

Как скрыть блок место его переноса на новую строку. СSS

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