Search code examples
htmlcsswidth

CSS match previous sibling element's width (extend background color to overflow content)

I have two elements within a div and they both have different background colors. The first div may sometime overflow (due to dynamic content) and because of that the background-color does not extend to cover the overflowed content.

Example code:

<html>

<head>
  <style>
    html {
      font-size: 10px;
    }

    body {
      margin: 0;
    }

    .header {
      text-size-adjust: 100%;
      font-size: 1.4rem;
      line-height: 1.4rem;
      z-index: 10;
      display: flex;
      flex-direction: row;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      padding: 0px 3.2rem;
      gap: 1.6rem;
      height: 5.5rem;
      background: rgb(255, 255, 255);
      border-bottom: 0.1rem solid rgb(177, 187, 205);
      box-sizing: unset;
    }

    .app {
      max-height: calc(100vh - 56px);
      overflow: auto;
    }

    .sub-header {
      display: flex;
      gap: 24px;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      padding: 32px 64px;
      width: 100%;
      height: 112px;
      background-color: rgb(42, 49, 65);
      box-sizing: border-box;
    }

    .content {
      padding: 2.4rem 6.4rem;
      background-color: rgb(229, 232, 238);
    }
    .content p {
      font-size: 1.4rem;
    }
  </style>
</head>

<body>
  <div>
    <div class="header">
      <div>Header 1</div>
    </div>
    <div class="app">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec,
          consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui
          sed pulvinar mattis, massa justo tempor justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus
          viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</body>

</html>

JSFiddle: https://jsfiddle.net/Ltwav18c/

What can I do to make sure that the background colors for both the divs (sub-header and content) extend to its overflowed content.

Background color doesn't extend to overflowed content

The content div doesn't overflow, only the sub-header div does.

I tried setting sub-header div's width: fit-content and min-width: 100% and that extends the background-color to cover all its content and if it doesn't overflow, then it extends to the viewport size.

JSFiddle: https://jsfiddle.net/Ltwav18c/1/

But the issue with this is that the second div's width doesn't extend and so it remains at 100%. I want the second div to match the first div's width always.

Background color for second div doesn't extend to match first div

FYI, I cannot modify the CSS for the parent divs (app and header) as they're controlled by a different app and my app is being embedded.

Solution

  • You could consider wrapping .sub-header and .content in a grid layout. The width: fit-content of .sub-header causes the grid column track to be as wide as .sub-header. This then gives .content more room to fill, thus matching .sub-header's width:

    html {
  font-size: 10px;
}

body {
  margin: 0;
}

.header {
  text-size-adjust: 100%;
  font-size: 1.4rem;
  line-height: 1.4rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: 0px 3.2rem;
  gap: 1.6rem;
  height: 5.5rem;
  background: rgb(255, 255, 255);
  border-bottom: 0.1rem solid rgb(177, 187, 205);
  box-sizing: unset;
}

.app {
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.sub-header {
  display: flex;
  gap: 24px;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  padding: 32px 64px;
  width: fit-content;
  height: 112px;
  background-color: rgb(42, 49, 65);
  box-sizing: border-box;
}

.content {
  padding: 2.4rem 6.4rem;
  background-color: rgb(229, 232, 238);
}

.content p {
  font-size: 1.4rem;
}
    <div>
  <div class="header">
    <div>Header 1</div>
  </div>
  <div class="app">
    <div style="display: grid">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec, consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui sed pulvinar mattis, massa justo tempor
          justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</div>

    Alternative solution using flex:

    html {
  font-size: 10px;
}

body {
  margin: 0;
}

.header {
  text-size-adjust: 100%;
  font-size: 1.4rem;
  line-height: 1.4rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  padding: 0px 3.2rem;
  gap: 1.6rem;
  height: 5.5rem;
  background: rgb(255, 255, 255);
  border-bottom: 0.1rem solid rgb(177, 187, 205);
  box-sizing: unset;
}

.app {
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.sub-header {
  display: flex;
  gap: 24px;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  padding: 32px 64px;
  width: fit-content;
  height: 112px;
  background-color: rgb(42, 49, 65);
  box-sizing: border-box;
}

.content {
  padding: 2.4rem 6.4rem;
  background-color: rgb(229, 232, 238);
}

.content p {
  font-size: 1.4rem;
}
    <div>
  <div class="header">
    <div>Header 1</div>
  </div>
  <div class="app">
    <div style="display: flex; flex-direction: column; width: fit-content;">
      <div class="sub-header">
        <button>Button #1</button>
        <button>Button #2</button>
        <button>Button #3</button>
        <button>Button #4</button>
        <button>Button #5</button>
        <button>Button #6</button>
        <button>Button #7</button>
        <button>Button #8</button>
        <button>Button #9</button>
        <button>Button #10</button>
        <button>Button #11</button>
        <button>Button #12</button>
        <button>Button #13</button>
        <button>Button #14</button>
        <button>Button #15</button>
      </div>
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis est condimentum, consequat nisi nec, consequat metus. Maecenas feugiat ligula sit amet odio suscipit sodales ac vel mauris. Maecenas tempus, dui sed pulvinar mattis, massa justo tempor
          justo, ac condimentum odio diam ut lacus. Praesent in odio a lacus viverra ultricies non a est.
        </p>
      </div>
    </div>
  </div>
</div>