CSS child 100% INNER width

Question

У меня есть ситуация, когда мне нужно указать, что ширина ребенка должна быть 100% от ширины INNER родителя, а не внешней ширины, что означает, что родительский прокручивает по горизонтали.

Ситуация выглядит примерно так:

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; 
} 

Как уменьшить экран достаточно мал, что стол (CHLD 1) перестает сокращаться, и это заставляет родителя переполняться и, таким образом, показывает scrollbar, второй ребенок по-прежнему сохраняет 100% ширины OUTER родителя, я бы хотел, чтобы он составлял 100% от ширины INNER родителя, так что он имеет ту же ширину, что и первый ребенок (таблица).

Я хотел бы сохранить ответ как чистый CSS, насколько это возможно, JavaScript будет в порядке, если он не полагается на события изменения размера окна, потому что #parent может быть сокращен по другим причинам (растет горизонтальный брат) ,

Answer 1

Добавить box-sizing: border-box; правило #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>

О border-box, посмотреть здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.

Answer 2

Вам нужно сохранить длинное название как одну строку? если нет, вы можете попробовать этот код;

#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>

Answer 3

границы собственности увеличится ширина элементов, поскольку он добавляет к космическому пространству, кроме TD элементов.

Ваш дочерний элемент 2 имеет приграничные Thats собственности почему ваш получать полоса прокрутки,

Это stackoverflow link объясняет это лучше

Извиняюсь, я совершенно не понял вопрос.

Вы ищете 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; 
} 

Answer 4

меня ушло некоторое время, чтобы понять, что вы клоните, но я думаю, теперь я понимаю. Вы просто хотите, чтобы child2 div охватывал всю ширину родительского элемента, когда таблица child1 вызывает горизонтальную прокрутку.

This guy объясняет проблему довольно хорошо. После прочтения я вижу, что то, чего вы пытаетесь достичь, невозможно с помощью структуры HTML, которую вы имеете, и без использования JS.Он объясняет, что вы можете сделать это, применив inline-block к родительскому элементу и применяя минимальную ширину 100%, но это работает только в горизонтальных прокрутках главного браузера.

Вот решение таблицы отображения, если вы счастливы изменить свой 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>