1

I have a situation where I need to specify that a child's width be 100% of the INNER width of the parent, not the outer width, meaning that the parent scrolls horizontally.

The situation looks similar to this:

http://codepen.io/anon/pen/ygqPZG?editors=1100

HTML

<div id='parent'>
  <table id='child1'>
    <colgroup>
      <col width='400px'></col>
    </colgroup>
    <tbody>
      <tr>
        <td>Child1withareallyreallylongtitle</td>
      </tr>
    </tbody>
  </table>
  <div id='child2'>
    <p>Child 2</p>
  </div>
</div>

CSS

#parent {
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
}

As you shrink the screen small enough that the table (chld 1) stops shrinking and it forces the parent to overflow and thus show the scrollbar, the second child still retains 100% of the OUTER width of the parent, I would like it to be 100% of the INNER width of the parent so that it is the same width as the first child (table).

I would like to keep the answer as pure of CSS as possible, JavaScript would be fine as long as it doesn't rely on window resize events because the #parent may be shrunk for other reasons (a horizontal sibling grows).

Dustin Poissant
  • 3,201
  • 1
  • 20
  • 32
  • Is there any reason why you can't use `display:table`, `display:table-row` and `display:table-cell` instead of separating `child1` in to a table and `child2` to in to a div? – WizardCoder Jun 09 '17 at 22:20

4 Answers4

0

Do you have to keep the long title as one line? if not, you can try this code;

    #parent {
      margin: 16px;
      border: 1px solid black;
      box-sizing: border-box;
       box-sizing: border-box;
    }

    #child1 {
      width: 100%;
      border:1px solid red;
      box-sizing: border-box;
      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }

    #child2 {
      border:1px solid blue;
      box-sizing: border-box;
    }
    <div id='parent'>
      <table id='child1'>
        <colgroup>
          <col width='400px'></col>
        </colgroup>
        <tbody>
          <tr>
            <td>Child1withareallyreallylongtitle</td>
          </tr>
        </tbody>
      </table>
      <div id='child2'>
        <p>Child 2</p>
      </div>
    </div>
VvV
  • 1,548
  • 12
  • 18
  • Yes it absolutely HAS to overflow. No i do not need a long title, I used the long title to demonstrate an overflow. In actuality there are about 30 columns to the table, and they are short titles, but when they add up the table essentially has a min width that is pretty wide and the parent MUST overflow. It was just easier for demo purposes to create a long title rather than 30 columns. – Dustin Poissant Feb 07 '17 at 03:26
0

It took me quite a while to understand what you were getting at, but I think I understand now. You just want the child2 div to span the full width of the parent element, when the child1 table causes a horizontal scroll to appear.

This guy explains the problem pretty well. After reading it I can see that what you are trying to achieve isn't possible with the HTML structure you have and without out using JS. He explains that you can do it by applying inline-block to the parent and applying a min-width of 100%, but that only works on the main browser windows horizontal scrolls.

Here is a display table solution if you are happy to change your HTML.

#parent {
  overflow-x:auto;
  border: 1px solid black;
  /* margin for display purposes in full screen snippet viewer */
  margin-top:80px;
}
.table {
  display:table;  
  width:100%;
}
.table-row {
  display:table-row;
}
.table-cell {
  display:table-cell;
}
.child1 {
  border: 1px solid red;
}
.child2 {
  border: 1px solid blue;
}
<div id="parent"> 
  <div class="table">
    <div class="table-row">
      <div class="table-cell child1">
        I live in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell child2">
        Child 2
      </div>
    </div>
  </div>
</div>
WizardCoder
  • 3,353
  • 9
  • 20
-1

border property will increase elements width since it adds to outer space except td elements.

Your child 2 element has border property thats why your getting scroll bar

This stackoverflow link explains it better

Apologies, I misunderstood the question completely.

Are you looking for this output

<div id="top">
    <div id='parent'>
      <table  id='child1'>
        <colgroup>
          <col width='400px'></col>
        </colgroup>
          <tr>
            <td>Child1withareallyreallylongtitle</td>
          </tr>
      </table>
      <div id='child2'>
        <p>Child 2</p>
      </div>
    </div>
</div>

CSS

#top{
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#parent {
    width : 100%;
    display :table;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
}
Community
  • 1
  • 1
Pravin Gajul
  • 1
  • 1
-2

Add box-sizing: border-box; rule to #child2:

body {
  padding: 0.1px;
}

#parent {
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
}
<div id='parent'>
  <table id='child1'>
    <colgroup>
      <col width='400px'></col>
    </colgroup>
    <tbody>
      <tr>
        <td>Child1withareallyreallylongtitle</td>
      </tr>
    </tbody>
  </table>
  <div id='child2'>
    <p>Child 2</p>
  </div>
</div>

About border-box, see it here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.

yibuyisheng
  • 149
  • 8