Скролинг в flex контейнере

270

18 января 2018, 18:58

Есть блок

<div style="display: flex;flex-direction:column;justify-content: flex-end;height: 400px;overflow: auto;">
Content
</div>

По идеи, при наполнеии этого блока, должен появляться скроллбар. Но контент просто ибрезаеться. Как это исправить?

Answer 1

Флексы не нужны

.flex-container { 
 
  height: 400px; 
  overflow: auto; 
  border:1px solid #ccc; 
} 
.message { 
  padding:10px; 
  margin:10px; 
  border-radius:5px; 
} 
.message.to { 
  border:1px solid #99f; 
    display:inline-block; 
} 
.message.from { 
  border:1px solid #aec; 
  display:inline-block; 
} 
.from-left { 
display:flex; 
  justify-content:flex-start; 
} 
.from-right { 
display:flex; 
  justify-content:flex-end; 
}

<div class="flex-container"> 
<div class="from-left"> 
<div class="message from">Hello world</div> 
 
</div> 
<div class="from-right"> 
<div class="message to">Lorem Ipsum</div> 
 
</div> 
<div class="from-left"> 
<div class="message from">Hello world</div> 
 
</div> 
<div class="from-right"> 
<div class="message to">Lorem Ipsum</div> 
 
</div> 
<div class="from-left"> 
<div class="message from">Hello world</div> 
 
</div> 
<div class="from-right"> 
<div class="message to">Lorem Ipsum</div> 
 
</div> 
<div class="from-left"> 
<div class="message from">Hello world</div> 
 
</div> 
<div class="from-right"> 
<div class="message to">Lorem Ipsum</div> 
 
</div> 
<div class="from-left"> 
<div class="message from">Hello world</div> 
 
</div> 
<div class="from-right"> 
<div class="message to">Lorem Ipsum</div> 
 
</div> 
 
</div>