Creating a responsive container div using Flexbox that adjusts its size based on the content of its child elements

I'm in the process of developing a chat application and need to utilize flexbox for arranging messages. However, I've encountered an issue where using display: flex and flex-direction: row causes text overflow within the message container. How can I ensure that the parent div (with class message) scales with the content inside the message-text div?

.message {
  margin-top: 1%;
  border-top: solid 1px lightgrey;
  padding: 1%;
}

.message-icon {
  width: 60px;
  height: 60px;
  background: red;
  margin-right: 1%;
}

.message-name {
  width: 50px;
}

.message-text {
  width: 100%;
  min-height: 20px;
  padding: 2px;
  border-radius: 2%;
  display: inline-block;
}
<div class='message'>
  <div class='message-icon'></div>
  <div class='message-name'>Steve:</div>
  <div class='message-text'>THIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGE</div>
</div>

htmlcssflexbox

Answer №1

When you apply flex to a container with the class .message, all first-level children within it will be flexed as well, with classes like .message-*

If you're new to using flexbox, I highly suggest checking out this guide

.message {
  margin-top: 1%;
  border: solid 1px lightgrey;
  padding: 1%;
  display: flex; /* added */
  flex-direction: row; /* added */
}

.message-icon {
  width: 60px;
  height: 60px;
  background: red;
  margin-right: 1%;
}

.message-name {
  width: 50px;
}

.message-text {
  width: 100%;
  min-height: 20px;
  padding: 2px;
  border-radius: 2%;
  display: inline-block; /* you dont need this, since its flexing anyways */
}
<div class='message'>
  <div class='message-icon'></div>
  <div class='message-name'>Steve:</div>
  <div class='message-text'>THIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS
    A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS IS A MESSAGETHIS
    IS A MESSAGETHIS IS A MESSAGE</div>
</div>

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

Adaptable fix for lengthy website links (that surpass the screen size)

When I work on creating responsive websites, I often encounter a problem with long URLs breaking my fluid grid and causing horizontal scrolling on smaller devices. These lengthy URLs don't wrap, which means they widen the container beyond the device w ...

htmlcssmobileresponsive-design

Personalized input element featuring integrated chips and accompanying text

I am in the process of designing a unique custom input element with dual functionality. It allows users to input text It enables users to embed or remove chips within the text by selecting an option from a dropdown menu My current development stack inclu ...

javascripthtmlangularkendo-ui

Incorporate a corner box feature to bring attention to the typed.js functionality

I have successfully integrated typed.js into my project and now I am looking to replicate the highlighted text with an excel-like box in one corner. I've managed to get the text typing out while also adding an SVG for the box in HTML, but I'm hav ...

javascriptjqueryhtmlcss

Is it possible to turn off GPU rasterization for a particular SVG element in Google Chrome?

There is a peculiar issue with the SVG graphic displayed on my webpage. On some computers, the complex linearGradient filling a Rect does not display all the Stops correctly, while on other computers it appears fine. I discovered that if I disable "GPU ra ...

htmlcssgoogle-chromesvg

Distributing elements evenly across the parent width using Angular FlexLayout for a responsive design

I need to create 3 div squares: div-left, div-middle, and div-right, each with a width of 300px. These squares should be arranged horizontally within the parent div main-section, which will adjust its size based on the screen width, being 1300px if the scr ...

htmlcssangularflexboxangular-flex-layout

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Navigating the data returned by an AJAX call can be quite perplexing

Every time a link is clicked on the website located at , an AJAX request triggers to load the content automatically. Lately, I have been encountering a perplexing piece of code injected into my response data: <script> var _q = document.createEle ...

phpjavascripthtmlajax.htaccess

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

javascriptjqueryhtml

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project I have a grid structure that is somewhat complex: body { margin: 0; height: 100vh; text-align: center; } .grid-container { ...

javascripthtmlcsscss-gridanime.js

Adjust the sound levels with a sleek jQuery UI volume slider

Currently, I am working on developing a customized volume slider for FlowPlayer that is built upon the standard jQuery UI Slider. I am seeking assistance in establishing a connection between this slider and the HTML5 video volume controls. Below is the co ...

javascriptjqueryhtmljquery-ui

Exploring the Behavior of Row Inside Card in Bootstrap 4 Alpha 6

In my usage of bootstrap 4 alpha 6, I encountered an unexpected issue while incorporating a grid within the body of a card without the card-block class. <div class="container"> <h5> The fundamental component of a card is the .card-bloc ...

cssbootstrap-4twitter-bootstrap-4

Undisclosed iFrame technique for uploading files - issue with nested forms

This question seems to be more related to JavaScript/jQuery/DOM rather than Rails, but it's all linked to how I integrated it in Rails. I'm currently working on allowing users to upload multiple photos while creating a new object (auction). The c ...

jqueryruby-on-railsformshtmlfile-upload

Ways to give preference to custom css instead of the default Angular-material css

The search label is originally padded to the left by Angular-material.min.css with a value of padding-left: 3px. https://i.sstatic.net/YQpAb.png My attempt to customize the padding to the right in my custom.less file has not overridden the default CSS fr ...

angularjscssangular-material

Drop-down menu offering multiple selections

I have a code where I want to enable multiple selection with both dropdown and checkboxes. However, when I use the multiple attribute in the select tag, it generates a list-type view which is not what I desire. Can someone please help me achieve the desire ...

javascriptphphtml

Achieving a stacked layout for a JavaScript menu that is responsive and positioned below an

Despite several attempts, I am struggling with a problem and now need some help. I have designed a menu system with a logo, but the issue is that the menu does not stack under the logo when @media reaches 823px. Can anyone suggest a solution to this proble ...

javascripthtmlcss

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

htmlcssinternet-explorer

What specific empty form fields are populated in $_POST?

Upon submitting an HTML form, I have observed that CERTAIN empty input fields are included in the $_POST array while others are not (despite all of them having a name attribute). What factors determine whether an input field is included in the array or not ...

phphtmlforms

Displaying error or success messages within the same webpage

This is my first time reaching out here because I couldn't resolve the issue on my own. Please keep in mind that I am relatively new to Spring and not very experienced in Java and coding in general. I am working on creating a Server application using ...

htmlspringparametersthymeleaf

In a bootstrap column containing an inner element with a wide width that is taking up more space than intended

I am attempting to create two columns of equal size, containing nested elements with large dimensions and adding overflow: scroll;. However, the column width is defaulting to 100%. Interestingly, when I apply a small width to the column (), the issue is re ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Synchronize both ends in Angular 17 Animation for smooth sliding left and right movements

Having some trouble implementing an animation in my Angular 17 application. There are two divs next to each other, with the left one being hidden by *ngIf when a button is clicked. The animation on the left side works fine, but the right div doesn't ...

cssangularangular-animations