Even though Div has a defined width, it is being extended beyond its limits

I'm feeling a bit lost with this issue and despite spending an entire morning on it, I still can't figure out what's going wrong.

Below is the code for my component:


export default function Summary({ activation }: SummaryProps) {
  const t = useTranslations("ActivationPage.summary");
  const tCommon = useTranslations("Common");
  const toast = useToast();
  return (
    <div className="flex gap-6 w-full overflow-x-hidden">
      <Card className="min-w-0 flex-1">
        <CardHeader className="flex flex-row items-center relative justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            {t("activation_key")}
          </CardTitle>
          <Button
            className="absolute top-3 right-3"
            variant={"outline"}
            size={"icon"}
            onClick={(event) => {
              event.stopPropagation();
              navigator.clipboard.writeText(activation.activation_key);
              toast({
                type: "info",
                message: tCommon("actions.copied"),
                id: "idCopied",
              });
            }}
          >
            <Copy className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold overflow-hidden text-ellipsis whitespace-nowrap">
            {activation.activation_key}
          </div>
        </CardContent>
      </Card>

...

This code represents a page with several cards displaying quick look information in headers.

I would like each line to appear on just one line and be truncated if it exceeds the available space.

While everything looks good when working with activation keys, I encounter a problem with host IDs (on the third card), causing the page to expand width-wise and creating a horizontal scroll, even though the host ID is still being truncated.

I am puzzled as to why the page layout breaks when dealing with a longer string compared to others.

Attached are two screenshots - the first showing the working display, and the second highlighting the issue:

https://i.sstatic.net/LR8lnZwd.png

https://i.sstatic.net/l1GRv19F.png

I've tried various options such as break-all, whitespace-nowrap, truncate, etc., but none have resolved the problem.

I also attempted using w-1/4 on Card containers, but it had no effect.

I am utilizing shadow cards (not updated) and Tailwind CSS in a Next.js project.

EDIT:

I discovered a temporary workaround by limiting the width of my div with max-w-[30ch], which seems to resolve the issue. However, I'm unsure why it works - although the text is truncated as expected, it doesn't cause the page to expand uncontrollably.

EDIT 2: (SOLUTION)

I managed to solve the problem by switching from flex to grid layout. While I still don't fully understand why flex didn't work smoothly, adopting a grid layout proved to be an effective solution.

Answer №1

It seems like the issue you're encountering is related to the flex-1 CSS property. However, it's recommended to establish a max-width for your components as a precaution in case any unexpected behavior occurs.

If adjusting the max-width doesn't resolve the issue, consider revisiting the flex-shrink or flex properties. It's possible that there may be conflicting values causing the problem.

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

CSS: positioning controls at opposite ends of a table cell

I need help with styling a button and textbox inside a table cell. Currently, the button is stuck to the textbox, but I want them positioned at opposite ends of the cell. How can I achieve this? <td style= "width:300px"> <asp:TextBox ID="Tex ...

Encountering difficulty in identifying the error during data fetching on the server side of a Next.js application

I am attempting to troubleshoot an error with my Next.js server-side data fetching, but I am encountering two problems. export async function getStaticProps() { try { const fetchUrl = "some api url"; const resp = await axios.get(fetchUrl); ...

In NextJS 12, an UnhandledPromiseRejectionWarning occurs when trying to reference the TextEncoder which is not defined

Currently, I am working on developing a Spotify clone using NextJS 12 along with a Tailwind CSS template. To initiate the project, I executed the following command: npx create-next-app -e with-tailwindcss spotify-2. The project was successfully created, b ...

How to align the "bootstrap navbar li items" in the center across all page widths

I'm trying to center the li items "on the entire page width" in this basic bootstrap navbar that I've shared. I attempted using "justify-content-center" in the parent. It did center the navbar items, but not across the entire page width. The ite ...

Why does my icon container persistently remain visible, rather than appearing only upon hovering?

Below is the code snippet I'm currently working with: .page-section { border: 4px solid rgba(0,0,0, 0); padding: 10px; box-sizing: border-box; transition: border 1s ease-out; } .page-section:hover { border: 4px solid #000000; ...

Encountering an error while trying to run a Next.js application on Linux Mint

View the error screenshot After creating a new Next.js app with npx create-next-app, I ran npm run dev and encountered the following error message ...

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

Why my attempts to alter numerous CSS elements using JQuery are failing?

Here's the code snippet I'm working with: var showThis = $(this).attr('id'); // div0, div1, div2 etc. $('#' + showThis).attr('style', 'background-color: #063 !important, height: 520px'); I am trying to mo ...

Modifying the CSS attributes within an iframe by referencing the parent window's properties

I am facing a challenge involving running an iframe on two separate pages within the same website, each with distinct CSS properties. The dilemma arises from the limited space available on my index.php page, where I aim to confine text within the iframe to ...

What's the best way to align text in relation to the image?

enter image description here I need help with positioning my text relative to the resizing image at different breakpoints. Can anyone assist with this? Is there a way to position text relative to the background in a manner that it always stays attached t ...

Delay in displaying Promise API call in NextJS

Currently, I am encountering an issue while making calls to an API function that I have already set up and confirmed to work flawlessly in other projects. Interestingly, I have utilized the same backend API calling method in another project as well as with ...

The feature "text-underline-position: under" is not functioning properly in Android Chrome

Take a look at this example page: html, body { margin: 0; padding: 0; } header { padding: 16px 0; text-align: center; background: black; } header img { width: 234px; height: 222px; ...

Created a CSS sliding menu, but suddenly unable to activate links on it

Recently, I created a slide out menu for the mobile version of my website. The menu is hidden beneath the page and is designed to slide out to the right when the label for a checkbox is clicked. It functions smoothly and is very responsive on mobile devi ...

The overflow:hidden property does not seem to be effective for controlling the display of the

I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected. Approa ...

Utilizing Bootstrap to create a responsive design with a full-height view on the body,

While adjusting the page width in Chrome dev tools, I noticed that the page also increases vertically. It appears that Bootstrap is assuming a viewport height larger than what it actually is. Here is the relevant code snippet: <!DOCTYPE html> <ht ...

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

What are some effective methods for organizing HTML in a clean and orderly manner?

I have limited experience with HTML, but I need to layout a form in a precise manner similar to WinForms. Here is my attempt using the little CSS and HTML knowledge I possess: The issue lies in everything inside the white area being ABSOLUTELY LAID OUT .. ...

Having trouble with my CSS file in CodeIgniter view not working

Hello, I am currently using CodeIgniter 3.0.6 and this is the structure of my directories: /application /assets /js /mycss.css /system Everything seems to be working fine with my default controller loading the file in index.php. However, when I t ...

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

Can someone assist me in figuring out why the ShowDetail.html page is not opening after I submit my form?

I'm having trouble getting the shoDetail.html page to open when I submit the code. I even tried entering the complete URL, but it still won't work. Here is the code I am using: <div class="form-group row"> <div class="col-lg-12 col-md-1 ...