Content extending out of nested flex containers

Is there a way to truncate the content of the first 'message-title' when it reaches the edge of the green container, instead of overflowing outside? This issue might be related to Flexbox - has anyone encountered this and found a solution?

I have included relevant codepen link at the end of this post.

Markup

<div class="container">
  <div class="message">
    <div class="message-content">
      <div class="message-header">
        Header
      </div>
      <div class="message-body">
        <div class="message-body__left">
          AV
        </div>
        <div class="message-body__right">
          <div class="message-main">
            <div class="message-type">

            </div>
            <div class="message-details">
              <div class="message-title">
                Test string Test string Test string Test string Test string Test string Test string Test string
              </div>
              <div class="message-subtitle">
                Blah blah
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  // more message elements...
</div>

CSS

* {
  min-width: 0;
  box-sizing: border-box;
}

// CSS styles for container, message, message content, etc.
// Truncation specific style for message-title

.message-title {
  padding-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-subtitle {
  display: flex;
  justify-content: space-between;
}

Find the Codepen example here - https://codepen.io/anon/pen/VGgQdL

htmlcssflexbox

Answer №1

Issue: The white-space: nowrap attribute in the .message-title selector is causing problems.

Edit 1.

Solution: Removing display: flex from the .message-content class resolves the issue. This is because for 

overflow: hidden; text-overflow: ellipsis
to function properly, the parent container must have a fixed width. With 
.message-content { display: flex; }
enabled, this doesn't happen as the width remains fluid.

If you require display: flex on the parent element, you can manually set a fixed width using either 

.message-title: { max-width: 234px; }
or width: 234px. Both solutions work similarly, but the layout may break at smaller screen sizes.

* {
  min-width: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 400px;
  background: red;
}

.message {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: 2rem;
}

.message-content {
  display: flex;
  flex-direction: column;
  margin-right: 20%;
  max-width: 80%;
  align-items: flex-start;
  background: green;
}

.message-header {
  display: flex;
}

.message-body {
  display: flex;
}

.message-body__left {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 0.5rem;
  background: teal;
  display: none;
}

.message-body__right {
  position: relative;
  background: #eff2f5;
  border-radius: 3px;
  word-wrap: break-word;
  white-space: normal;
}

.message-main {
  display: flex;
}

.message-type {
  position: relative;
  width: 3rem;
  height: 3rem;
  display: flex;
  flex-shrink: 0;
  background: blue;
}

.message-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-title {
  padding-bottom: 0.25rem;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-subtitle {
  display: flex;
  justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Cover</title>
</head>
<body>
<div class="container">
<div class="message">
<div class="message-content">
<div class="message-header">
Header
</div>
<div class="message-body">
<div class="message-body__left">
AV
</div>
<div class="message-body__right">
<div class="message-main">
<div class="message-type">

</div>
<div class="message-details">
<div class="message-title">
Test string Test string Test string Test string Test string Test string Test string Test string
      </div>
      <div class="message-subtitle">
        Blah blah
</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="message">
    <div class="message-content">
      <div class="message-header">
        Header
</div>
      <div class="message-body">
        <div class="message-body__left">
Av
</div>
        <div class="message-body__right">
          <div class="message-main">
            <div class="message-type">

</div>
              <div class="message-details">
                <div class="message-title">
                  Test string Test string
     </div>
                <div class="message-subtitle">
                    Blah blah
       </div>


</div>
          


    </div>
        
        

                 

                 </div>



               
              
            

          
                
                
                 
              
            
            




</div>
        
    
      
    

  


</body>




    
  
</html>

Answer №2

According to @Viktor's observation, the issue was caused by the white-space:nowrap property.

In addition, I recommend simplifying your layout. In my opinion, there is no necessity for numerous containers; alternatively, you can achieve the same outcome with less code.

Simplicity often leads to straightforward solutions. For instance, making the blue box occupy all vertical space does not require any special adjustments because of the default value of align-items, which is 

stretch</code. This means child items will fill all available space along the <code>cross-axis
(Y axis in this case). The same principle applies to child items of parents with flex-direction:column, as they take up all horizontal space.

Feel free to refer to the code snippet below:

.container{
  display:flex;
  flex-direction:column;
  box-sizing:border-box; 
  padding:1.5rem; 
  max-width:400px; 
  background:red;
}

.message:not(:last-child){
  margin-bottom:20px;
}

.message{
  display:flex;
  flex-direction:column;
}

.header{
  background:green;
}

.body{
  display:flex;
  flex-direction:row;
}

.type{
  flex-basis:20%;
  background:blue;
}

.subtitle{
  flex-grow:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:lightgray;
}
<div class="container">
  <div class="message">
<div class="header">
Header
</div>
<div class="body">
<div class="type"></div>
<div class="subtitle">
Test string Test string Test string Test string Test string Test string Test string Test string Blah blah
</div>
</div>
  </div>
  <div class="message">
<div class="header">
Header 2
</div>
<div class="body">
<div class="type"></div>
<div class="subtitle">
Test string2 Test string2 Test string2 Test string2 Test string Test string Test string Test string Blah blah
</div>
</div>
  </div>
</div>

I crafted this layout using this tool, a valuable resource for experimenting, understanding, and generating flexbox layouts.

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

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

Tips on how to remove the first column from a jQuery hover effect

Currently, I have a function that enables hover events on a table. Right now, it excludes the header row but I also need it to exclude the first column. Any suggestions on how to do this? $(".GridViewStyle > tbody > tr:not(:has(table, th))") ...

javascriptjqueryhtml

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

htmlangulartypescript

Utilize JQuery to interact with div elements

Can anyone please advise me on how to access a DIV within a TD element? <table border="0" cellpadding="0" cellspacing="0" width="95%"> <tr> <td valign="top" style="width:25%"> <img src="../NewsImages/8201043771 ...

jqueryhtml

Press the toggle button to initiate or cease the process of refreshing my page

I've been working on creating a toggle button to control the refreshing of a webpage, but I seem to be facing an issue with stopping the process. Can someone help me verify if my logic is correct? This is the code I'm currently using: <butto ...

javascriptjqueryhtml

Disable the justification of Angular UI Tabs on mobile devices

When using the Angular UI Tabs component with the attribute justified="true", everything works fine on desktop. However, I am facing an issue when the resolution changes for tablets and phones, as I want to change justified to false. I prefer not to rely ...

cssangularjstwitter-bootstraptabsangular-ui

Transforming web content from HTML into text format and subsequently reinserting it into HTML for webpage integration

Our current process involves using an XML feed along with jquery and ajax to retrieve data, which is then parsed for display on the webpage. var des = $(this).find("Description").text(); var trimmed= des.substring(0, 300); if (trimmed.length <= 300) { ...

javascriptjqueryhtmlajax

Javascript: object continuously moving despite key being released

When I leave the keyword new on line: var myGamePiece = new makeComponent(myContext, 30, 30, "red", 10, 120); The red square continues to move even when I release the arrow key. However, if I remove the new element from that line, the square stops moving ...

javascripthtml

Manipulate HTML Table to Obtain Value of First Column Cell When Another Cell is Clicked using Javascript

I have a PHP web application where I am retrieving data from MySql and displaying it in the HTML table below. <table id = "table" width="500px" cellpadding=2 celspacing=5 border=2 > <tr> <th>Subject Code</th> <th>Subje ...

javascriptphphtmlhtml-table

What is the best way to seamlessly move an element from a margin-left position of -9999px back onto the page?

Here are some additional details - because of unusual restrictions with the YouTube API, I have to push a container off the page in order to create the illusion that the container is hidden. I accomplish this using the following CSS class: .my_hide{ ...

javascriptjquerycss

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Creating personalized static HTML cards with PHP Mirror API for Google Glass

Looking to integrate an HTML formatted card into Google Glass timeline using the Mirror API. Utilizing the PHP PHP Mirror Client API, which accepts a message and image as parameters, displaying the image in the background similar to this example: insert ...

phphtmlgoogle-glassgoogle-mirror-apiaero-glass

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

In my next.js project, I have developed a Container component with specific styles. As I incorporate this container component throughout the site, I aim to assign it a className for context-based styling. Illustrated below is an example of the Container c ...

cssreactjsnext.jsstyles

Having trouble accessing NSE Bhavcopy zip file in R due to a HTTP status of '403 Forbidden'

My current project involves automating the process of downloading a zip file in R. On the specific webpage I am working with, I can easily download the zip file by clicking on it or by right-clicking and saving the file. However, my challenge lies in down ...

htmlr

What is the best way to resize my images without distorting their appearance?

I am currently facing an issue with utilizing images in my project. I aim for them to resemble the first two pictures. However, when I attempt to adjust the image height using CSS, the result ends up looking unappealing. Is there a method for the images to ...

htmlcss

When utilizing jQuery to retrieve the height of position:absolute elements, the script is being executed twice, resulting in inaccurate values being returned on

The issue I'm encountering with detecting the height of absolutely positioned content is demonstrated in this JSFiddle. I am working on creating a tabbed panel where users can select a room type and then a sub-type. The sub-types (ul.sub-types) are s ...

jqueryhtmlcss

Content in Table TD with rowspan attribute is concealed by setting the visibility of TR to "collapse"

I have created an HTML table where some rows are hidden using CSS with visibility:collapse By default, only the first and last rows of the table are visible. In one column on the right side, I've set rowspan to accommodate multiple lines of text. T ...

htmlcsshtml-tablecss-tables

Trigger a function when a CSS animation reaches its completion

I am working on a small jQuery function that needs to return its value within a subfunction. The purpose behind this is so that I can later chain this function with other jQuery functions. However, I want the next chained function to start only after the m ...

javascriptjquerycsspromise

Is there a way to have line breaks done automatically within the <pre> tag?

Struggling to insert a code snippet into my React application, it's odd that no matter what I try, the format doesn't include line breaks. Below is the code snippet: import React from 'react'; import './Hello.scss'; const ...

javascripthtmlcssreactjs