Search code examples
cssresponsive-designwidth

Css - Width / Height 100% without dynamic amount of pixels

How to set the width of an element to take 100% the width of its parent minus an unknown width of sibling element.

index.html

<div class="main">
  <div class="sidemenu">
    ...
  </div>
  <div class="contant">
    ...
  </div>
</div>

style.css

.main
{
  width: 100vw;
}

.sidemenu
{
  width: X; /* this value is dymanic, it may change in runtime using JS */
}

.contant
{
  width: ???; /* what do I put here? */
}

If the side-menu width was fixed I could of use calc(100% - X), but since the width is dynamic, how can I set the width to take the remaining width of the parent?
Can I achieve this using Css only (without JavaScript)?

Solution

  • You may use flexbox so there's no need to assign a specific width to the content area

    e.g.

    .main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.content { flex: 1; margin-left: 1rem; }

    Codepen demo