Element with a width of x VW does not appear to react to window resize

Question

I have two divs in a table, each should take up 50% width, adding up to the entire width of the browser window, for that I decided to use VW, specifically 50vw, but when resizing the window, the divs do not respond... how can I fix it?

#market_and_industry_research_section{
    width: 100vw;
    height: 59vw;
    padding: 0;
    margin: 0;
}

market_and_industry_research_section_table{
    width: 100vw;
    height: 59vw;
    margin: 0;
    padding: 0;
}

#market_and_industry_research_section_description{
    width: 50vw;
    height: 59vw;
    background-color: blue;
    margin: 0;
}

#market_and_industry_research_section_files{
    width: 50vw;
    height: 59vw;
    background-color: red;
    margin: 0;
}

<table id="market_and_industry_research_section_table">
       <tr>
           <td id="market_and_industry_research_section_description">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>

           </td>
           <td id="market_and_industry_research_section_files">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>
           </td>
       </tr>
   </table>

PLEASE LOOK AT THIS GIF

https://imgur.com/a/QuKhRgm

Answer 1

This is one way, with flex, a transitioning width, and using :hover where only the first element is visible until you hover over it:

.my-list {
  list-style: none;
  padding: 0;
  display: flex;
  margin-left: auto;
  background: yellow;
  width: 20%;
  transition: width 0.5s ease;
  overflow: hidden
}

.my-list:hover {
  width: 100%;
}

.my-list li {
  display: none;
  flex: auto;
  background: orange
}

.my-list li:first-child,
.my-list:hover li {
  display: block;
  width: 20%;
  margin: 5px;
  padding: 5px;
}

<div>
  <ul class="my-list">
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
  </ul>
</div>

The design itself isn't the best for responsiveness, any menu item above ~15 characters won't look great on smaller displays because there isn't enough available width.

A common use for JavaScript is to prevent the animation from jittering, with some debounce/throttle mechanism, and the animation itself can be left to CSS by toggling CSS class names.

Here's an alternate way where each item takes up the full width and has a fixed height: (And where JS only toggles CSS classes)

function myListOpen() {
  document.querySelector(".my-list").classList.add("open")
}

function myListClose() {
  document.querySelector(".my-list").classList.remove("open")
}

.my-list {
  list-style: none;
  margin-left: auto;
  background: yellow;
  padding: 5px;
  width: 20%;
  overflow: hidden;
  transition: width 0.5s ease;
}

.my-list.open {
  width: 100%;
}

.my-list li {
  background: orange;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  height: 0;
  line-height: 2em;
  transition: height 0.5s ease;
}

.my-list li:first-child,
.my-list.open li {
  height: 2em;
  visibility: visible;
}

<button type="button" onclick="myListOpen()">open</button>
<button type="button" onclick="myListClose()">close</button>
<hr />

<div>

  <ul class="my-list">
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
    <li>Menu Item 1</li>
  </ul>

</div>