Make HTML element bigger than its sibling, limited by max/screen size

user_7773885 0
Viewed 75

I'm trying to draw text with an underline below it, such that the underline spans to the sides up to 300 pixels. When there is no space for the whole 300 pixels, that amount should go down to make space for the text.
This is the correct behavior for a wide screen:
enter image description here

This is the correct behavior for a thin screen:
enter image description here

I've tried having empty divs on both sides of the 'hello' with width: 300px, but that doesn't work well:

<div style="width: fit-content; display: flex; flex-direction: column;">
    <div style="display: flex; flex-direction: row;">
        <div style="width: 300px;"></div>
        <p>Hello</p>
        <div style="width: 300px;"></div>
    </div>
    <hr style="width: 100%;">
</div>

  • If I set width: fit-content in the parent, I get the correct behavior on a wide screen, but on a thin screen the sides don't minimize themselves, and the divider clips out to outside the screen.

  • If I don't set width in the parent, I get the correct behavior on a thin screen, but on a wide screen the divider fills the entire screen width, instead of only 300 px extra on each side.

reactjs spacing layout css html
1 Answers

i am not sure what you realy want but you can try this: (add this in that div: max-width: 300px;width: 100%; )

<div style="width: fit-content; display: flex; flex-direction: column;">
    <div style="display: flex; flex-direction: row;">
        <div style="max-width: 300px;width: 100%;"></div>
        <p>Hello</p>
        <div style="max-width: 300px;width: 100%;"></div>
    </div>
    <hr style="width: 100%;">
</div>
user_150204230
Related