Using the paragraph element within a flexbox forces the parent element to expand to the full width

I am attempting to design a straightforward layout where a heading, paragraph, and button are centered both horizontally and vertically on the page. My goal is for the .centered-div to match the width of the .heading.

The issue arises when the paragraph tag disrupts the layout by causing the .centered-div to inherit the width of the .container instead of the desired width of the .heading.

If I eliminate the paragraph, the .centered-div successfully takes on the width of the .heading.

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  display: inline-block;
  text-align: right;
}

.description {
  display: inline-block;
  width: 50%;
}

.link-button {
  width: auto;
}
<div class="container">
  <div class="centered-div">
    <h1 class="heading">A Considerably Long Heading</h1>
    <p class="description">
      Lorem ipsum dolor...
    </p>
    <a class="button" href="/">Learn More</a>
  </div>
</div>

In this visualization, the .container is shown in grey while the .centered-div is highlighted with a red outline.

https://i.sstatic.net/wXta4.png https://i.sstatic.net/8stw8.png

If further details are required, please don't hesitate to reach out. Thank you in advance for your assistance.

css

Answer №1

If you're looking to make your text container adjust its width based on the header, you can utilize the following CSS trick: width:0;min-width:100%;

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.centered-div {
  display: flex;
  margin: auto;
  align-self: center;
  align-items: flex-end;
  flex-direction: column;
}

.heading {
  text-align: right;
}

.description {
  width:0;
  min-width:100%;
  text-align:justify;
}

.link-button {
  width: auto;
}
<div class="container">
  <div class="centered-div">
    <h1 class="heading">An Extensive Heading Goes Here</h1>
    <p class="description">
      Long piece of placeholder text that expands across multiple lines for demonstration purposes.
    </p>
    <a class="button" href="/">Discover More</a>
  </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

What could be the reason for the CSS stylesheet not functioning properly on mobile devices?

I am a newcomer to web development and currently working on a website for a massage therapist using bootstrap. However, I am facing an issue where my CSS styles are not displaying correctly on mobile devices. The backgrounds and bootstrap navbar disappear, ...

htmlcssmobilebootstrap-4

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

htmlcssresponsive

What is the best approach to incorporating two distinct grid layouts within a single section?

I am attempting to replicate the header-graphic navigation found on this website: It appears that they are not using a grid for the header-graphic area, but rather keeping them separated as 2 divs within their Hero block container. I am interested in recr ...

javascriptjquerycssgrid

Four unique classes will each be styled differently using pseudo selectors

Consider using this specific markup - it cannot be altered (Even though it would be simpler to add more classes or IDs). There will always be a maximum of six class "test" elements on the page, so the code can be written without certainty of their surroun ...

csspseudo-class

What could be causing Gulp Autoprefixer to generate unaltered CSS files?

I am currently learning how to utilize Flexbox, and I have encountered an issue with prefixing while using Gulp. The error message that pops up when attempting to use Gulp autoprefixer is as follows: [19:21:22] Starting 'styles'... [19:21:22] Th ...

cssflexboxgulpautoprefixer

Repair the bottom section on Bootstrap

I've successfully made the image stick to the footer, but I'm struggling to get the footer to stick to the bottom when in responsive mode. I'm new to bootstrap, so any help would be greatly appreciated. HTML: The footer is located after the ...

htmlcsstwitter-bootstrap

Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...

htmlcssmarkdowngithub-pagesinline-styles

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

javascriptcsscharts

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

How can the issue of the background fill option covering multiple loading bars be resolved?

I am currently relying on Google Translator, so there may be errors in the translation. The issue I am facing is that when I add a parameter with the "fillColor: '#f4f5f9'", the wheel covers one of the elements of Multiple Bars. I have modified ...

javascripthtmlcss

Adjust the size of an SVG to perfectly fit within a designated div

I've looked through several discussions here, but none of the suggested solutions seem to work for my specific situation. My issue involves an SVG that was created on a different website. It contains three elements, and I'd like to embed it whil ...

htmlcsssvg

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

I've been struggling to customize the primeNG paginator in my Angular application. Specifically, I am trying to style the dropdown that lets users select the number of data entries. Despite my efforts to figure it out, I have not been successful in st ...

cssangularprimengprimeng-dropdowns

Is there a way for me to include a transition in the text of the picture's caption?

I've been attempting to incorporate a transition:1s; and transition the text to color:#0000. The specific text I'm working with is 'Joe Doe' in the image caption below my image. I've experimented with various placements in my CSS, ...

css

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

cssseleniumscreenshotinternregression-testing

Should header and footer be incorporated as part of a template design?

Is it considered advisable to include tags such as etc from another page? For example: <?php include_once("header.php")?> Content specific to each individual page <?php include_once("footer.php")?> The header.php file includes: <!DOCTYP ...

phphtmlcss

The secrets of enchanting jQuery CSS effects

https://css-tricks.com/examples/MagicLine/ That's the URL I am currently using. However, it relies on <script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> There are other scripts that need <script ...

jquerycss