Hi,
There is css unit called viewport width(vw) and viewport height(vh).

Viewport need first meta tag named: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

1 viewport width specify 1% of user screen and change with resizing if you need the width of div fullscreen just add width: 100vw Css Rule.

As same 1 viewport height specify 1% user screen height.

You are I think looking for the width of the viewport, not the width of the screen (on e.g. windows devices the user can set the viewport to have whatever dimensions they like).

As @apokryfos has suggested you can use 1vw as 1% of the viewport width (and similarly 1vh for height). This will change automatically on any resizing (like the user moving the device from portrait to landscape or otherwise resizing the window).

I am very new to frontend web development and I am only trying to solve this issue as the frontend team (this is a university project) is struggling with this one.

We are developing using laravel which has many pre-made classes so that you do not have to code them (for example, you can do flex-col, overflow-x-hidden etc). Do not worry about that if you do not know what it is, I can take normal HTML and find the equivalent laravel class for it.

The issue

I need the width of the parent div to be a percentage of the screen width. If you look at the image below, you will see a green and red container.

They are both sitting in a parent container. I want that parent container to be, for example, 70 percent of the screens width so that it scales based on screen size. However, when I apply something like max width it does nothing.

After doing some research, it looks like setting width as percentage only works if the container has a parent container so I am unsure what to do. I have googled and looked at some more questions on stack overflow but all of them are focused on max height which is already working for me.

The code

This code includes everything seen in the image besides the top bar. We have also added a notification bar on the right.

<x-app-layout>

    <!-- Sidebar -->
    <div class="fixed flex flex-col top-14 left-0 w-14 h-1/3 hover:w-64 md:w-64 dark:bg-gray-900 h-full text-white transition-all duration-300 border-none z-10 sidebar">
        <div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700">
            <ul class="flex flex-col py-4 space-y-1 bg-blue-700">
                
                <li class="px-5 md:block bg-blue-700"> 

                    <div class="flex flex-column items-center h-8 bg-blue-700">
                        <span class=" bg-blue-700 text-sm font-light tracking-wide uppercase text-gray-400">
                            Dashboard
                        </span>
                    </div>

                </li>

                <li>
                    
                    <a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
                <span class="inline-flex justify-center items-center ml-4">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                </span>
                        <span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Overview</span>
                    </a>
                    
                </li>

                <li>
                    <a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
                        <span class="inline-flex justify-center items-center ml-4">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
                        </span>
                        <span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Loans</span>
                    </a>
                    
                </li>

                <!-- Board end -->

                <li>
                    <a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
                        <span class="inline-flex justify-center items-center ml-4">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                        </span>
                        <span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Lenders</span>
                    </a>
                </li>


                <li>
                    <a href="#" class="relative flex flex-column items-center h-11 mt-80 mb-10 focus:outline-none hover:bg-blue-700 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-600 dark:hover:border-gray-800 pr-6">
                    <span class="inline-flex justify-center items-center ml-4">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </span>
                    <span class="ml-2 text-sm tracking-wide truncate">Settings</span>
                    </a>
                </li>
                
            </ul>
            <p class="mb-14 px-5 py-3 hidden md:block text-center text-xs">IRC @2021</p>
        </div>
    </div>

    <!--Sidebar FINISHED-->



    <!--Dashboard Container START-->
    <div class="fixed flex top-14 left-14 md:left-64 w-96 h-full">
        <div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700 inline-block"> <!--background is blue just to see parent div-->

            <!--Notification Bar Container-->
            <div class="absolute fixed flex flex-col right-0 w-60 overflow-y-auto overflow-x-hidden">

                <ul class="flex flex-col items-center py-4 justify-between">
                    <li>
                        <span class="text-sm font-bold tracking-wide uppercase text-black">Notifications</span>
                    </li>
                    <li class="pl-2">
                        <span class = "pb-12 font-black tracking-wide text-red-600">Your Payment is due in 5 Days! </span>
                    </li>
                    <li class="pl-2">
                        <span class="pb-12 tracking-wide float-right text-red-400 font-medium">Verify your email address!</span>
                    </li>
                    <li class="pl-2">
                        <span class="pb-12 tracking-wide float-right text-red-400 font-medium">Please update your IRD number!</span>
                    </li>
                </ul>
            </div>
            <!--Notification Bar FINISH-->


            <!-- Overview Container-->
            <div class="fixed flex flex-col top-14 left-14 md:left-64 w-7/12 h-full text-white border-none">
                <div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between bg-white">
                    <ul class="flex flex-col py-4 space-y-1 bg-white">
                        <li class="inline-block ml-2 flex flex-grow justify-between">
                            <span class="text-sm font-bold tracking-wide uppercase text-black bg-white">Total Loan Balance</span>
                            <!--3 Loans Section-->
                            <span class="text-gray-400 items-center text-sm uppercase bg-blue flex flex-col bg-white">
                                <span class="text-3xl">3</span>
                                <span class="">loans</span>
                            </span>
                        </li>
                        <li class="inline-block ml-2 flex flex-grow justify-between">
                            <span class="bg-white h-full text-5xl font-medium tracking-wide text-red-500">$27,380.19</span>

                            <span class="ml-64 text-black bg-blue flex flex-col bg-white">
                                <span class="ml-auto text-black">Loan Total: <span class = "text-red-500">$30,000.00</span> </span>
                                <span class="ml-auto">Amount Repaid: <span class = "text-red-500">$2,619.81</span></span>
                            </span>

                        </li>

                        <li class="relative pt-1">
                            <span class="overflow-hidden h-5 mb-6 ml-2 mr-9 mt-5 text-xs flex rounded bg-white border-2">
                          <span style="width:20%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500">8.75%</span>
                        </span>
                       </li>

                        <li class="inline-block ml-2 mr-0 flex flex-col justify-between">
                            <span class="bg-white h-full text-sm font-light tracking-wide text-black">Upcoming Loan Repayment:  Loan 1, 28 May 2021</span>

                            <span class="bg-white mt-2 h-full text-sm font-light tracking-wide text-black">Projected Final Loan Repayment Date:  12 May 2026</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!--Overview Container FINISH-->
            
        </div>
    </div>
    <!--Dashboard Container FINISH-->


</x-app-layout>

If I set the parent containers (dashboard container) width to something static like 24 rems, then it works. But if the child elements are any bigger then that (which they are by a lot) then they just stretch outside of the parent div.

What I tried

At this point, I have tried many different things:

• Not setting the width at all in the container
• Adding absolute to all child containers
• Removing all sizing variables of child containers, one by one, all at once etc.
• Getting rid of all code, but the parent div, and adding in just the notification bar which is very simply. Also got rid of all its sizing elements. Still nothing works.

After all my testing, I have come to the conclusion that if I can figure out how to set the div as a percentage of the screen for width, then I can get all the child containers to fit in the parent one.

Appreciate all comments and answers!