CODEWITHSUNDEEP
htmlcontainersstretchextending
Andrey
Andrey

Reputation: 9

Make HTML element width stretch to specified hardcoded value extending parents width

I'm making simple handmade modal setup for react app. Let's say 3 upper divs form structure of my modal and 4th inner div is it's actual content I will insert into a modal as code below shows.

<div style="width: 100vw;
              height: 100vh;
              position: fixed;
              left: 0;
              top: 0;
              overflow: hidden;
              z-index: 1;
              display: flex;
              align-items: center;
              justify-content: center;" id="overlay">
    <div style="width: 90%;
                height: 90%;
                display: flex;
                align-items: center;
                justify-content: center;" id="wrapper">
          <div style="background-color: grey;
                  border-radius: 1rem;
                  background-clip: padding-box;
                  display: flex;" id="content">
            <div id="something">
                <p>Small. Not desired<br/>
            horizontal space.
                </p>
            </div>
          </div>
      </div>
 </div>

What style should I apply to div with id='something' to make its width stretch to the desired value (let's say at most to 50% of visible screen) while maintaining its ability to shrink if visible screen size is less than desired value and so its parent also extends in width such that total grey area (background) grows?

I tried applying width='max-content' to div with id='content' and then hardcoding divs with id='something' width to desired value, like width='50vw', but it doesn't seem to work. Any ideas how I can achieve mentioned behavior?

Upvotes: 0

Views: 25

Answers (0)

Related Questions