how to prevent child element from widening parent element's width in css

Question

As you can see, I have a container, which is displayed as inline-block. Within this container, I have two divs, #line1 and #line2. They contain the same length of characters.

If I add more characters to #line1, the widths of #container and #line2 will increase accordingly. But that is not what I expect.

What I expect is that widths do not change and I can see characters, which I just add into #line1, through scrolling horizontally.

#container {
  display: inline-block;
}

#line1 {
  background: lightblue;
}

#line2 {
  background: orange;
}

<div id="container">
  <div id="line1">123</div>
  <div id="line2">123</div>
</div>

Update

Is there any method to achieve this effect if I do not want to use a fixed width? Simply because I want them to be responsive.

Possible duplicate? http://stackoverflow.com/questions/443700/div-with-horizontal-scrolling-only — Tim Wilkinson, Apr 25 '16 at 09:09

score 2 · Accepted Answer · answered Apr 25 '16 at 09:07

2

You can set fixed width on #line1 and add white-space: nowrap and overflow-x: auto

#container {
  display: inline-block;
}
#line1 {
  background: lightblue;
  width: 70px;
  white-space: nowrap;
  overflow-x: auto;
}
#line2 {
  background: orange;
}

<div id="container">
  <div id="line1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, a.</div>
  <div id="line2">123</div>
</div>

answered Apr 25 '16 at 09:07

Nenad Vracar

118,580
15
151
176

2

Is there any other method if I do not want to use fixed width? If it has a fixed width, then its width would not decrease as I shrink the browser's width. – Lujun Weng Apr 25 '16 at 11:50
You can make it same as window width https://jsfiddle.net/Lg0wyt9u/613/ or container width https://jsfiddle.net/Lg0wyt9u/614/ – Nenad Vracar Apr 25 '16 at 11:57
Thanks a lot. Your jsfiddles give me great help. – Lujun Weng Apr 26 '16 at 07:09

score 1 · Answer 2 · answered Apr 25 '16 at 09:17

If you don't want elements to fit the sizes of their contents, you should set their widths and heights. And overwflow: auto property takes care of the auto-appering scrolling for the non-fit content.

#container {
  display: inline-block;
  width: 50px;
}

#line1 {
  background: lightblue;
  width: 50px;
  height: 18px;
  word-wrap: break-word;
  overflow: auto;
}

#line2 {
  background: orange;
  width: 50px;
  height: 18px;
  word-wrap: break-word;
  overflow: auto;
}

https://jsfiddle.net/x8amz1f1/

This solution only provides a vertical scrollbar. He wants to scroll horizontally. Replace word-wrap: break-word; with white-space: nowrap; — CZorio, Apr 25 '16 at 12:20

score 1 · Answer 3 · answered Apr 25 '16 at 09:24

You first need a width or maximum-width on your line boxes width: 50px;.

The second thing is, you have to define an overflow so that the boxes gets scrollbars. With overflow: scroll; the scrollbars will always be visible, with overflow: auto; the scrollbars just appear when the content is exceeding the box.

Now your text will break after every word. You need white-space: nowrap; so that the text is not breaking in between.

    #container {
      display: inline-block;
    }

    #line1 {
      background: lightblue;
width: 50px;
overflow: scroll;
white-space: nowrap;
    }

    #line2 {
      background: orange;
width: 50px;
overflow: auto;
white-space: nowrap;
    }

<!-- language: lang-html -->

    <div id="container">
      <div id="line1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
      <div id="line2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    </div>

Here is your example: https://jsfiddle.net/1Lkbttw0/

Should be overflow auto instead of overflow scroll no? Otherwise there is an unnecessary vertical scroll bar. — CZorio, Apr 25 '16 at 12:25
Yes, there would be a unneccessary scroll bar. The other side is that overflow auto can cause problems on mobile devices. If you care about mobile devices and want to use `overflow: auto;` you should also add `-webkit-overflow-scrolling: touch;` Unfortunately there is no chance to force only a single vertical or horizontal scroll bar. At least there is no easy css workaround that works in all browsers (as far as i know). — ReynekeVosz, Apr 25 '16 at 16:32

score -2 · Answer 4 · answered Apr 25 '16 at 09:24

-2

can make changes on line 2

#line2 {
    display: inline;
    background: orange;
}

answered Apr 25 '16 at 09:24

Amit Kumar Pawar

3,252
1
20
27

how to prevent child element from widening parent element's width in css

Update

4 Answers4