Adjusts width based on the child element's dimensions and content height

Question

Adjusts width based on the child element's dimensions and content height

I am trying to create a unique angled text flow where the width of each line is a set value --w. Below is the code I have so far:

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue
}

<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups...
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa c...
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecak...
  </div>
</div>

The issue I am facing is that I want the floated pseudo-elements on the sides to contribute to the --w width and expand the .outer-wrapper by one unit, as otherwise, the text overflows outside the red outlined box.

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

I am unsure how to achieve this using CSS alone. I know it can be done with JavaScript by detecting the pixel-valued height, storing it in a variable, updating it on resize, and recalculating from there. However, I would prefer a CSS-only solution.

Skewing the box is not a viable option in this scenario.

html css css-float shape-outside

Answer 1

Answer №1

While it comes with its own limitations and may not be a perfect fit for your specific scenario, one approach you could consider is utilizing a hidden duplicate of the content in a narrower container to determine the necessary height. Then, applying height: 100% to give .outer-wrapper the required height. Below is an example of how you can achieve this:

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-outer-wrapper {
  height: auto;
  display: flex;
}

.height-setter {
  background: lightgreen;
  width: calc(var(--w) * (1 - var(--f)));
  visibility: hidden;
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon;
  height: 100%;
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue;
}

<div class="outer-outer-wrapper">
<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Your custom content here...</p>
    <p>More content goes here...</p>
    <p>And even more content...</p>
  </div>
</div>
  
  <div class="height-setter">
    <p>Duplicated content for determining height...</p>
    <p>Additional duplicated content...</p>
    <p>More duplicated content...</p>
  </div>
</div>

Some potential issues to keep in mind:

The calculated height may not always be exact due to line break discrepancies. To mitigate this, you can add extra lines with padding at the bottom of .height-setter for better coverage.
Duplicate content exists within the code, which might not pose an issue for screen reader users as long as visibility: hidden is implemented correctly.
If .outer-outer-wrapper exceeds the width of its contents, additional adjustments like flex cropping or using an .outer-outer-outer-wrapper with overflow: hidden might be necessary.

Answer 2

While it comes with its own limitations and may not be a perfect fit for your specific scenario, one approach you could consider is utilizing a hidden duplicate of the content in a narrower container to determine the necessary height. Then, applying height: 100% to give .outer-wrapper the required height. Below is an example of how you can achieve this:

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-outer-wrapper {
  height: auto;
  display: flex;
}

.height-setter {
  background: lightgreen;
  width: calc(var(--w) * (1 - var(--f)));
  visibility: hidden;
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon;
  height: 100%;
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue;
}

<div class="outer-outer-wrapper">
<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Your custom content here...</p>
    <p>More content goes here...</p>
    <p>And even more content...</p>
  </div>
</div>
  
  <div class="height-setter">
    <p>Duplicated content for determining height...</p>
    <p>Additional duplicated content...</p>
    <p>More duplicated content...</p>
  </div>
</div>

Some potential issues to keep in mind:

The calculated height may not always be exact due to line break discrepancies. To mitigate this, you can add extra lines with padding at the bottom of .height-setter for better coverage.
Duplicate content exists within the code, which might not pose an issue for screen reader users as long as visibility: hidden is implemented correctly.
If .outer-outer-wrapper exceeds the width of its contents, additional adjustments like flex cropping or using an .outer-outer-outer-wrapper with overflow: hidden might be necessary.

Answer 3

Answer №2

Using Pure CSS Only

Note: Remember to duplicate your content in the HTML code as shown below

If you utilize a dynamic language to print your content, this process becomes simple.

This method is effective across all screen sizes, regardless of content size or padding. Additionally, feel free to adjust the values of --f and --w, everything will still function smoothly!

* {
        margin: 0;
    }

    html, body { display: grid }

    body {
        --w: min(35em, 65vw);
        --f: 15%;
        background: linear-gradient(90deg, transparent var(--w), pink 0);
        font: 1em ubuntu, sans-serif
    }

    .outer-wrapper {
        width: var(--w);
        box-shadow: 0 0 0 2px red;
        background: lemonchiffon;
        height: 100%;
        position: relative;
    }

    span::before, span::after {
        --i: 0;
        --j: calc(1 - var(--i));
        --g:
                linear-gradient(to right bottom,
                hsla(50, 50%, 50%, var(--j)) 50%,
                hsla(50, 50%, 50%, var(--i)) 0);
        float: left;
        height: 100%;
        width: var(--f);
        background: var(--g);
        shape-outside: var(--g);
        content: ''
    }
    span::after {
        --i: 1;
        float: right
    }

    .inner-wrapper {
        box-shadow: inset 0 0 0 2px blue
    }

    .inner-wrapper-hidden {
        width: calc(100% - var(--f));
        visibility: hidden;
        pointer-events: none;
    }

    .inner-wrapper-absolute {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

<div class="outer-wrapper">
<div class="inner-wrapper-absolute">
    <span aria-hidden="true"></span>
    <div class="inner-wrapper">
        <p>Your duplicated content here...</p>
        <p>More duplicated content...</p>
        <p>Additional duplicated content...</p>
    </div>
</div>
<div class="inner-wrapper-hidden">
    <p>Duplicated content goes here...</p>
    <p>More duplicated content...</p>
    <p>Additional duplicated content...</p>
</div>
</div>

Answer 4

Using Pure CSS Only

Note: Remember to duplicate your content in the HTML code as shown below

If you utilize a dynamic language to print your content, this process becomes simple.

This method is effective across all screen sizes, regardless of content size or padding. Additionally, feel free to adjust the values of --f and --w, everything will still function smoothly!

* {
        margin: 0;
    }

    html, body { display: grid }

    body {
        --w: min(35em, 65vw);
        --f: 15%;
        background: linear-gradient(90deg, transparent var(--w), pink 0);
        font: 1em ubuntu, sans-serif
    }

    .outer-wrapper {
        width: var(--w);
        box-shadow: 0 0 0 2px red;
        background: lemonchiffon;
        height: 100%;
        position: relative;
    }

    span::before, span::after {
        --i: 0;
        --j: calc(1 - var(--i));
        --g:
                linear-gradient(to right bottom,
                hsla(50, 50%, 50%, var(--j)) 50%,
                hsla(50, 50%, 50%, var(--i)) 0);
        float: left;
        height: 100%;
        width: var(--f);
        background: var(--g);
        shape-outside: var(--g);
        content: ''
    }
    span::after {
        --i: 1;
        float: right
    }

    .inner-wrapper {
        box-shadow: inset 0 0 0 2px blue
    }

    .inner-wrapper-hidden {
        width: calc(100% - var(--f));
        visibility: hidden;
        pointer-events: none;
    }

    .inner-wrapper-absolute {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

<div class="outer-wrapper">
<div class="inner-wrapper-absolute">
    <span aria-hidden="true"></span>
    <div class="inner-wrapper">
        <p>Your duplicated content here...</p>
        <p>More duplicated content...</p>
        <p>Additional duplicated content...</p>
    </div>
</div>
<div class="inner-wrapper-hidden">
    <p>Duplicated content goes here...</p>
    <p>More duplicated content...</p>
    <p>Additional duplicated content...</p>
</div>
</div>

Answer 5

Answer №3

To tackle this issue using only CSS, we can utilize mathematical calculations to determine the height of the .outer-wrapper. By solving a basic equation, we can find the new height based on the previous height, width, and aspect ratio.

The key point to consider is that the area occupied by the text remains constant in both scenarios – represented by the shaded regions. Therefore, adjusting the height of the outer-wrapper proportionally will maintain this equilibrium.

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

https://i.sstatic.net/2TSgQ.png

I encountered challenges setting the height attribute as specified for outer-wrapper, due to difficulty with the syntax. Any guidance or assistance provided to resolve this issue would be greatly appreciated.

.outer-wrapper {
    width: min-content;
    box-shadow: 0 0 0 2px red;
    background: lemonchiffon;
    height: calc((var(--w) + sqrt(var(--w) * var(--w) - 4 * var(--f) * var(--w)))/(2 * var(--f)));
}

Answer 6

To tackle this issue using only CSS, we can utilize mathematical calculations to determine the height of the .outer-wrapper. By solving a basic equation, we can find the new height based on the previous height, width, and aspect ratio.

The key point to consider is that the area occupied by the text remains constant in both scenarios – represented by the shaded regions. Therefore, adjusting the height of the outer-wrapper proportionally will maintain this equilibrium.

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

https://i.sstatic.net/2TSgQ.png

I encountered challenges setting the height attribute as specified for outer-wrapper, due to difficulty with the syntax. Any guidance or assistance provided to resolve this issue would be greatly appreciated.

.outer-wrapper {
    width: min-content;
    box-shadow: 0 0 0 2px red;
    background: lemonchiffon;
    height: calc((var(--w) + sqrt(var(--w) * var(--w) - 4 * var(--f) * var(--w)))/(2 * var(--f)));
}

Adjusts width based on the child element's dimensions and content height

Answer №1

Answer №2

Using Pure CSS Only

Answer №3

Similar questions

Steps for adjusting menu link color after being clicked

Upon migrating from Vue CLI 2 to 3, an error is thrown stating: "Cannot locate element: #app" and an empty body is

Displaying cards horizontally on desktop and vertically on mobile using CSS

When using a Kendo Grid with a Checkbox as a column, the focus automatically shifts to the first

What is the best way to make hover text that also copies when you highlight the main text?

Utilizing Sessions Across Several PHP Forms

Set the userID variable as the assigned value and the username variable as the ng-model attribute for a select

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

Utilizing Rvest for extracting data from LinkedIn profiles

Looking for assistance with implementing mouseover scrolling on an unordered list

Finding the image source of a clicked image

The highcharts datetime format is not functioning properly within a Bootstrap 4 column

Struggling with creating a slideshow - is the display set to none?

The request for http://localhost:3000/insert.js was terminated due to a 404 (Not Found) error

Display a pop-up window after a set amount of time and automatically close it when clicking on an

Creating an animated Gif using HTML and CSS styling

Display Listings Shortcode with Responsive CSS styling

What are the steps for adding a photo to the folder directory on my hosting server?

The efficiency of a website that handles numerous files

The offset values of $(element) keep increasing indefinitely when they are updated repeatedly