Make a div wider than its parent without horizontal scrollbar and without overflow: hidden?

Question

Is it possible to get a child element to surpass the width of the parent element to the full extent of the browser without a horizontal scroll?

I've tried the solutions posted here Is there are way to make a child DIV's width wider than the parent DIV using CSS?

But with this particular HTML (see below) there's only one that works and yet creates an horizontal scrollbar (the extra width seen in the code snippet and the image below is causing the scrollbar to appear)

*I could always add an overflow-x: hidden; in <body> but I'd prefer not to

EDIT: There are certain css properties that even though do not make sense in the example, they should be kept in the solution (if any)

    <div class="main">
      <div class="container">
        <div class="fit">
          something 1
        </div>
        <div class="parent">
          <header class="full full5">
            child full5
          </header>
        </div>
        <div class="fit">
          something 2
        </div>
      </div>
    </div>

    body: {
      margin: 0px;
    }

    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #e8e8e8;
      border: 1px solid #000;
      margin: 0px;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-width: 300px;
      width: 100%;
    }

    .parent {
      display: flex;
      /* flex-direction: column; */
      width: 100%;
      background-color: #e9cccc;
      box-sizing: border-box;
      position: sticky;
      top: 0;
    }

    .fit {
      height: 50px;
    }

    .full {
      background-color: #d1ccd8a6;
      border: 1px solid #666;
      border-radius: 3px;
      height: 50px;
      padding: 0px;
      box-sizing: border-box;
    }

    .full5 {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

body: {
  margin: 0px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}

<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>

EDIT2:

If the <body> has a margin:0 the posted solutions work, except if there is a vertical scrollbar (when isn't there one?)

Can you tell us which is parent and child ? and which element you need over which? — Manjuboyz, Apr 12 '20 at 08:27
You can see the HTML for the hierarchie >> what I'd like is to have the "child full5" (as seen in the provided code snippet) to occupy the main div, but without going wider than that. The reason for the provided structure is because it resembles my current code — GWorking, Apr 12 '20 at 09:13
I don't understand a thing, *You want an element to be wider than it's parent without scrollbars*. the code you provided already answers the question ? — Rainbow, Apr 12 '20 at 10:18
@ZohirSalak Actually, if there is a vertical scrollbar none of the solutions work — GWorking, May 10 '20 at 08:38

score 1 · Answer 1 · answered Apr 12 '20 at 09:24

Is this something you want?

I just made changes your CSS of .main, .parent and .full-5

body: {
  margin: 0px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
  position: relative;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  top: 0;
  height: 50px;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
    position: absolute;
    left: 0;
    right: 0;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}

<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>

The `position: sticky` is necessary (in the example it is useless, but it is not an error) — GWorking, Apr 12 '20 at 09:42

Manjuboyz · Answer 2 · 2020-04-13T03:39:04.150

1

Here you go(View it in full screen for visualization):

body {
  margin: 0;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}

<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>

edited Apr 13 '20 at 03:39

answered Apr 12 '20 at 09:25

Manjuboyz

6,978
3
21
43

But I do see scrollbars in the snippet (?) It'd also be helpful if you could spot the changes in the code with some comments – GWorking Apr 12 '20 at 10:06
I assume it is a browser scroll nothing to do with the code, I can try reducing some width if that helps. – Manjuboyz Apr 12 '20 at 10:09
@GWorking check the code, the scroll is fixed. `width` was not provided to the `container` hence there were scroll. Also I highlighted few places where I modified the code. – Manjuboyz Apr 12 '20 at 10:14
(you have eliminated the `max-width` of the `.container`, which is one of the requirements) – GWorking Apr 12 '20 at 10:21
@GWorking had to leave for some work, Check the code now, hope it works for you now! – Manjuboyz Apr 12 '20 at 13:46
You've changed the `flex-direction: column` in main, so that elements are not centered. Getting it back destroys the layout here. Yet, a comment in the main question made me realize that the provided code already works (!) I'm thinking whether I delete the question or leave this opened for future users, thanks for your time nonetheless!! – GWorking Apr 12 '20 at 20:03
1

LOL! yeah, so I have updated the code, it is up to you to keep the answer or take down! – Manjuboyz Apr 13 '20 at 03:39
1

sometimes we overlook things I guess. – Manjuboyz Apr 13 '20 at 04:02

score -1 · Answer 3 · answered Apr 12 '20 at 09:13

-1

You can use z-index in css code to bring over than parent and fill color to push background

answered Apr 12 '20 at 09:13

UnUsuAL

74
6

I've uploaded an image to better show what I'd like to correct, is the extra width of the child element – GWorking Apr 12 '20 at 09:16

Make a div wider than its parent without horizontal scrollbar and without overflow: hidden?

3 Answers3