Блоки не вмещаются в длину окна

Question

при полноэкранном режиме браузера все вмещается, но стоит мне немного поменять размер окна как 1 блок съезжает вниз.

#colums-2{     
    overflow: hidden;  
    position: relative; 
    z-index: 10;
    font-family: 'Josefin Sans', sans-serif;
    min-height: 200px ;
    max-height: 10000px;
    background: #e8e8e8;      
  }
  .colum{  
    min-height: 55vh;
    max-height: 100vh;  
    max-width: 19.8vw;
    min-width: 5vw;
    display: inline-block;
    vertical-align: top;  
    position: relative;
    overflow: hidden;
    border-right: solid #0b0c10;
    color: #0b0c10;

 <div id="colums-2">
<div class="colum">текст</div>
<div class="colum">текст</div>
<div class="colum">текст</div>
<div class="colum">текст</div>
</div>

Answer 1

Используйте flex-box

#colums-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
}
.colum {
  flex-grow: 1;
  flex-shrink: 1;
  display: block;
  border-right: 2px solid #000;
}
.colum:last-child {
  border: none;
}

 <div id="colums-2">
<div class="colum">текст</div>
<div class="colum">текст</div>
<div class="colum">текст</div>
<div class="colum">текст</div>
</div>

Answer 2

Используя display: flex

#colums-2 {
  position: relative;
  font-family: 'Josefin Sans', sans-serif;
  min-height: 200px;
  max-height: 10000px;
  background: #e8e8e8;
  
  display: flex;
}

.colum {
  width: 100%;
  min-height: 55vh;
  max-height: 100vh;
  max-width: 19.8vw;
  min-width: 5vw;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  border-right: solid #0b0c10;
  color: #0b0c10;
}

<div id="colums-2">
  <div class="colum">текст</div>
  <div class="colum">текст</div>
  <div class="colum">текст</div>
  <div class="colum">текст</div>
</div>

БЛОГ НА HUSL

Блоки не вмещаются в длину окна

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