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

Unable to fix gap at the base of the jumbotron

Utilizing the jumbo tron to display a hero image of psd, there seems to be a gap at the bottom that I have tried to adjust with margin-bottom: 0px without success. .jumbotron { background-image: url(image/background.png); background-repeat: no- ...

htmlcsstwitter-bootstrap

Move to Fieldset Upon Link Click

Here's an example of what I have implemented so far here It's evident that this is not fully functional due to the PHP and jQuery integration. This demo is just a showcase of my progress. I am looking to create a functionality where clicking on ...

javascriptjqueryhtml

What is the method for determining the width of a Mat-Table once it has been displayed?

When utilizing Angular Material Mat-Table in conjunction with Angular 8, I am passing the dataSource dynamically. The number of rows and columns varies each time. Is there a method to calculate the width of the table once it is rendered on the screen? &l ...

htmlangularangular-materialmat-table

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

javascriptphphtmlajaxjson

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

React's input onChange event does not trigger for the second time. It only works the first time

Recently, I developed a React JS application to import images from external sources and process them. To handle the user's onChange event, I utilized the onChange attribute to execute my handleChange function. However, I encountered an issue where it ...

javascripthtmlreactjs

Discovering the positions of HTML elements rendered with WebKit (or Gecko) technology

I am seeking a way to retrieve the dimensions (coordinates) of all HTML elements on a webpage as they appear in a browser, including their rendered positions. Specifically, I need to obtain values like (top-left, top-right, bottom-left, bottom-right) Afte ...

pythonhtmlperlrenderingrendering-engine

Steps for transferring data between two components

I'm looking for a way to transfer an object's id from one component to another. <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let user"> ...

htmlangulartypescriptangular-material

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

javascriptjqueryhtmlcss

Navigate to the adjacent IDs

I have multiple sections with varying content and links (previous and next) to navigate to the next section. Initially, everything functions properly. However, when adding a new section in between existing ones, I am required to update all the ids to ensu ...

javascriptjqueryhtml

Switch out the specific content within the p tag

Looking to update the highlighted text within a p tag. The code below addresses handling new line characters, but for some reason the replacement is not working as expected. Check out the HTML snippet: <p id="1-pagedata"> (d) 3 sdsdsd random: Subj ...

javascriptjqueryhtmlreplace

Organizing your code with precision

I'm struggling with a project due to the poorly formatted code, making it almost impossible to read. Despite my attempts with various plugins and tools in VIM, Netbeans, Sublime Text 2, and Eclipse, the situation only seems to worsen. If anyone has ...

phpjavascripthtml

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

AngularJS ng-repeat nested loop allows you to iterate through an array

I am currently working with the following JSON data: { "ListNhomThanhTra": [ { "ListKeHoachThanhTra": [ { "ListDoiTuong": [ { "MA_DV_DUOC_TT": "DT01", ...

htmlangularjshtml-table

Is it possible to extract user-defined keywords from the URL?

Is it possible to implement dynamic functionality like this using PHP on my website (www.mywebsite.com)? If a user types www.mywebsite.com/banana into the URL bar, can my website take the keyword "banana" as input and search for it in a database table? ...

htmlformsurl

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

javascriptjqueryhtml

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

My query is quite straightforward - why isn't the code functioning properly? I am attempting to have the text echoed in PHP displayed inside a div with the ID of "show". Interestingly, this works with a txt file but not with PHP or any other type of f ...

javascriptpythonphphtmlajax

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

I am currently customizing my website and utilizing the AnimatedModal.js framework. I have successfully displayed content in one modal, but encountered difficulty when attempting to create multiple modals as they all share the same ID. My question is, how ...

javascripthtml