Overflow scrollbars do not appear on flex divs

I am struggling with implementing a simple flex container that contains standard divs. The issue I am facing is that the overflow does not display a vertical scroller as desired. In order to achieve this, I have included the following CSS code snippet:

#chatBody {
  height: 170px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

Additionally, within the HTML structure, the chat messages are contained within a div element with the id "chatBody". Here is an example of how the chat messages are structured:

<div id="chatBody">
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>

  <!-- Additional chat message elements go here -->

</div>
htmlcssflexbox

Answer №1

#chatBody {
    height: 80px;
    position:relative;
    overflow-y:scroll;
    display: flex;
    min-height: 0;
    flex-direction: column-reverse; /* 'column' for start, 'column-reverse'       for end */
}
<div id="chatBody">
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div><div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
...
</div>

I opted for using flex-direction column-reverse over justify-content due to its compatibility with the overflow property. Please let me know if this resolves any issues you were facing.

Answer №2

To prevent the issue of the scroll becoming inactive when using column-reverse, it is recommended to wrap it in an additional flex container.

When column-reverse is applied, the last element will be displayed at the top and the scrollbar will function properly within the parent wrapper.

To visually position that last element at the bottom, you can flip the entire container using scale() and then reverse the children elements so they are readable again.

NOTE: The scrolling direction will also be reversed - scrolling down will move the content up on the screen due to the mirroring effect.

See the demo below:

#chatBody {
  height: auto;
  width: auto;
  flex: 1;
  display: flex;
  flex-flow: column-reverse;
  transform: scale(1, 1);
  counter-reset:div;
}
.chat-msg:before {
counter-increment:div;
content:counter(div)' - ';
float:left;color:red;
}
div[id] {
  overflow: auto;
  border: solid;
  height: 170px;
  flex-flow: column;
}

div[id],
.chat-msg {
  transform: scale(1, -1);
}

.chat-msg {
  border-top: solid;
}
<div id>
  // Chat messages here
</div>

If you prefer not to mirror the container, you can refer to this answer that utilizes JavaScript to automatically scroll to the bottom without altering the flex properties.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

Can element.scrollIntoView and a "scroll" event listener be used simultaneously? I'm trying to create code that checks if the user has scrolled past a certain element, and if so, automatically scrolls smoothly to the next section. I attempted to achi ...

javascripthtmlcss

Hexagonal design reminiscent of a beehive

I am struggling with implementing a specific layout using grid CSS and I'm open to using flex or any other method. .container { display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(auto-fit, minmax(80px, 80px)); ...

htmlcssgrid

PHP code to display "ed elements that do not adjust height"

A php script is being utilized to scan a directory and populate a gallery with all the images. Within the <div id="content"> tag, the function <?php create_gallery("path"); ?> loads all the images. The issue arises when the height of the <d ...

javascriptphphtmlcss

Having trouble converting HTML to Ajax

When working on my website's Videos Page Layout, I encountered this snippet in the video script: <div class="video-views pull-left"> {$videos[i].viewnumber|kilo} {if $videos[i].viewnumber == '1'}{t c='global.view&apo ...

htmlajaxsmarty

Turning JavaScript Object into a Decimal Value

I've been working on an application where I want to be able to add up the columns of an HTML table. I managed to add inputs to the table successfully, but when trying to sum up the columns, I keep getting a "NaN" error. /* Function for calculating ...

javascripthtml

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

Within my DIV, I have applied a background-image and added a double border to the DIV. The image is currently visible in between the lines. Is there a method to resolve this issue and prevent the image from displaying in this manner? ...

cssborder

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss

Interacting with dynamically loaded HTML content within a div is restricted

On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...

javascriptjqueryhtmllazy-loading

Retrieve the current row by clicking the button

I've been struggling to retrieve a specific value from a row displayed on my PHP webpage. My objective is to obtain the current value from a particular cell in the row, but using getElementsByTagName has not been successful as it only returns an HTMLC ...

javascriptphphtml

The modal form vanishes without any action when the form is clicked outside

Everything was working fine with the form submission until I turned it into a modal using Bootstrap. Now, when the form is rendered in the modal, users can tab and type without any issues. However, if they click on any element within the modal (including t ...

javascriptjqueryhtmlformstwitter-bootstrap

Video Background, Adjusting Scale to Fit Height and Cropping Width as Necessary

Forgive me if this question has already been posed, but my search through various related discussions has not yielded the exact solution I'm looking for. My dilemma involves a 1280x720 video that I want to use as the background on my webpage. I need ...

htmlcssvideo

The HTML component fails to acknowledge width settings

I seem to be having trouble identifying an issue or perhaps I am misunderstanding something (I am using daisyui + nx + tailwind css + angular). To simplify my problem, let's consider the following scenarios: In the first scenario, I have: <div cl ...

htmlcssangulartailwind-cssdaisyui

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the c ...

css

What is the best way to shift a list to the right within my navigation bar using ReactJS and CSS?

I'm looking to align a list to the right in my navbar, as shown in the image below Image Here's my navbar.js code: import React from "react"; import "./Navbar.css"; const Navbar = ({ isScrolling, information }) => { ...

javascripthtmlcssreactjs

Items are overflowing the flex container, exceeding its boundaries

I've experimented with the width property, flex, flex-basis, and flex-shrink, but so far nothing seems to be working. I can't seem to pinpoint where the mistake lies in the code. I wanted to include the code snippet here, but it's throwing ...

htmlcssflexbox

Ensure that the text is wrapped properly when implementing innerHTML functionality

Within my Angular 5 application, I am faced with a requirement to display HTML content retrieved from a database. An example of the text stored in the database is: <div><u>Documents and Files</u></div><ul><li>These docu ...

javascriptcssangularinnerhtml

Displaying inner arrays in an Angular2 MatTable

Welcome to my initial post on Stack Overflow, where I hope to communicate my query clearly. I am currently attempting to develop a table with dynamic columns. However, I am encountering difficulty in comprehending how to bind matColumnDef to a specific el ...

htmlangulartypescripthtml-tableangular-material

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

htmlcsscss-positioncardview

What is the best way to eliminate a class from a jQuery UI Dialog?

Can a specific class be removed from the jQuery UI dialog? http://api.jqueryui.com/dialog/#option-dialogClass I'm curious if there is a way to remove a particular class from the dialog. Thank you. ...

htmljquery-uijquery-dialog