How come the width of an element with a relative position remains maximized even when it does not have any child elements?

I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications.

.message  {
    position: relative;
    color: white;
    background: #182533;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-left: 70px;
    margin-bottom: 10px;
    top: 40px;
    left: -10px;
    max-width: 320px;
    min-width: 70px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    }
      <div class="message">
      </div>

Why does it still have the max width even when it's empty?

Here is how it currently looks like: https://i.sstatic.net/b4fNf.png

And here is how it should look like: https://i.sstatic.net/j3HcH.png

htmlcss

Answer №1

I managed to find a solution using the CSS attribute width: fit-content; as demonstrated in the code snippet: MDN

.message {
  position: relative;
  color: white;
  background: #182533;
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-left: 70px;
  margin-bottom: 10px;
  top: 40px;
  left: -10px;
  width: fit-content; /*included fit-content here */
  max-width: 320px;
  min-width: 70px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
<!DOCTYPE html/>
<html>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="test.css" />

<body>
  <div class="message">1-2-3-4-5-6-7</div>
  <div class="message">1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25</div>
  <div class="message">1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18</div>
  <div class="message">1-2-3-4-5-6-7-8-9-10-11-12-13-14</div>
  </div>
</body>

</html>

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

Using the linear-gradient method in CSS for border images

I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...

htmlcss

<datalist> trigger that occurs when a selection is made

I'm currently working on a feature that resembles autocomplete, and instead of creating my own dropdown, I have decided to experiment with the use of < datalist >. I appreciate using native elements as they are compatible across various devices, ...

htmleventsevent-handlingdatalist

Align a series of items in the center while also ensuring they are left-justified

Issue Description : I am facing a problem with centering inline-block elements. When the elements exceed the width of a single line, Action Required : I want them to be justified to the left. I have tried using flex boxes and other methods, but I can ...

htmlcsslayout

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

csshtml

Expand row size in grid for certain row and item

For my project, I am utilizing a Grid layout to display 5 items per row. https://i.sstatic.net/PW6Gu.png Upon clicking on an item, my goal is to have the item detail enlarge by increasing the size of the HTML element. https://i.sstatic.net/nGj8l.png Is t ...

htmlcssreactjstypescript

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

javascriptjqueryhtmlcsstwitter-bootstrap

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

javascriptjqueryhtmlcss

Expanding Iframes in Joomla K2

Sorry if this question has been asked before, but I'm really struggling here... Here is the URL where the issue is happening: I am trying to embed an iframe from one of my client's websites onto my own personal website. Currently, I have the i ...

htmlcssiframejoomla3.0

Attempting to align HTML lines in a more compact manner

I can't seem to figure this out - I'm trying to stack three lines of text (one small, one big, one small) with single-spacing between them. However, no matter what I try, the larger font line always ends up with a double-space above it (for examp ...

htmlspacing

When scrolling, the selected text does not maintain its correct position

I'm looking to enable my users to search by selecting text. Once they select text, a new button will appear on the right side of the selected text giving them the option to search or not. However, when the user scrolls to the bottom of the page, the p ...

javascripthtmlcssangularjs

What is the best way to retrieve the background color of specific table cells?

I have a table that showcases various pieces of information. One interesting feature I added is a notes column, which includes a tooltip created using CSS and jQuery. However, there seems to be an issue with the tooltip's behavior - when I hover over ...

jqueryhtmlcss-tables

How to easily incorporate images after text in Bootstrap 4 beta

I seem to be having trouble inserting an image in the "menu" section for the last item "Kava so sebou" after the text. I want the picture to be centered vertically and the row to maintain consistency with the other items above it. Any advice or suggestions ...

htmlcssbootstrap-4

Utilizing spans to adjust the formatting of text within list items

When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't &a ...

htmlcsscss-float

What could be the reason for the malfunctioning of the "subscribe" button?

Whenever the subscribe button is clicked, it should send an email to the "subscriptions" section of the database. Unfortunately, when I click the button, nothing seems to happen. My understanding of this is very limited and I can't seem to troubleshoo ...

javascriptphphtml

Floating action buttons in CSS

I'm trying to create a button that reveals additional options when hovered over. I've been looking for a method similar to what's shown in the image below, but haven't been successful. This needs to be implemented on a web page using HT ...

jqueryhtmlcss

Exploring ways to validate the existence of a class in HTML table elements

If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them, This is what I have tried. However, it did not work as expected. How can I make this work correctly? What am I missing her ...

javascriptjqueryhtmlcss

The height of the Material UI dropdown is displaying in an improper manner

I'm currently experimenting with the Material UI dropdown on my website, utilizing the react-select library. However, I've encountered an issue where the UI gets compromised when using an option that exceeds the width of the dropdown. If anybody ...

cssreactjsuser-interfacematerial-uireact-select

Having trouble finding errors in Python using Selenium?

I encountered an error while using selenium in conjunction with python: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/main/article/section/form/div[1]/div[2]/ ...

pythonhtmlseleniumselenium-webdriver

The Bootstrap 5 Navbar dropdown is not as responsive as the dropdown showcased in the official documentation

I tried utilizing Bootstrap 5 to implement a dropdown functionality, but unfortunately, the dropdown on my website isn't behaving as expected. Unlike the dropdown in the official Bootstrap documentation, my dropdown remains open at all times even when ...

htmlcssdrop-down-menufrontendbootstrap-5

Reveal and conceal using CSS animations

I am working on adding animation effects to show and hide HTML elements triggered by a button click. The button toggles a "hide" class to display or hide the element. Check out my code snippet: const toggleButton = document.querySelector('button ...

javascripthtmlcss