Arsen Nykytenko
Arsen Nykytenko

Reputation: 97

How to make nested flex child scrollable

I have a list of messages (which is a flex child) in a container with unknown height and want to make them scrollable. But I cannot find a proper combination of flex-grow: 1, min-height: 0 and other flex tricks to make it working - message list is still bigger than its parent.

When I add overflow-y: auto to its parent - it works but this parent besides messages list includes some content which should not scroll.

Here's my example for this case: https://jsfiddle.net/ecbtrn58/2/

<div class="page">
  <div class="messages-section">
    <div class="header">Your messages</div>
    <div class="content">
      <img src="https://http.cat/100" width="70" height="50"/>
      <div class="messages-list">
        <div class="message">Hi.</div>
        <div class="message">Hello.</div>
        <div class="message">Good morning.</div>
        <div class="message">Yo!</div>
      </div>
    </div>
  </div>
</div>

.page {
  background-color: #ddd;
  width: 300px;
  height: 300px;
  .messages-section {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background-color: #ccc;
    .header {
      background: #bbb;
      padding: 5px;
    }
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
      .messages-list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        
        /* What to add here to make it scrollable? */
        .message {
          height: 50px;
          margin: 10px;
          padding: 10px;
          background: #1dc497;
        }
      }
    }
  }
}

How can I make messages list to scroll?

Upvotes: 0

Views: 220

Answers (1)

johannchopin
johannchopin

Reputation: 14844

You have to set the height of .content to 100% and make it scrollable:

.page {
  background-color: #ddd;
  width: 300px;
  height: 300px;
}

.page .messages-section {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  background-color: #ccc;
}

.page .messages-section .header {
  background: #bbb;
  padding: 5px;
}

.page .messages-section .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  height: 100%;
  overflow-x: scroll;
}

.page .messages-section .content .messages-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* What to add here to make it scrollable? */
}

.page .messages-section .content .messages-list .message {
  height: 50px;
  margin: 10px;
  padding: 10px;
  background: #1dc497;
}
<div class="page">
  <div class="messages-section">
    <div class="header">Your messages</div>
    <div class="content">
      <img src="https://http.cat/100" width="70" height="50" />
      <div class="messages-list">
        <div class="message">Hi.</div>
        <div class="message">Hello.</div>
        <div class="message">Good morning.</div>
        <div class="message">Yo!</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions