CSS子100％INNER幅

Question

子の幅が親のINNER幅の100％で、外幅ではなく、親が水平方向にスクロールすることを指定する必要がある状況があります。

状況は、次のようになります。

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）収縮が止まり、親がオーバーフローして強制的に2番目の子は親のOUTER幅の100％を保持していますが、最初の子（テーブル）と同じ幅になるように、親のINNER幅の100％にします。

私はできるだけ純粋な答えを得たいと思っていますが、#parentが他の理由で縮小する可能性があるため、ウィンドウのサイズ変更イベントに依存しない限り、JavaScriptは問題ありません（水平兄弟が大きくなります） 。

Answer 1

#child2にbox-sizing: border-box;ルールを追加します。border-boxについて

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>

を、ここではそれを参照してください：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingを。

Answer 2

長いタイトルを1行にしておく必要がありますか？そうでない場合は、このコードを試すことができます。

#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要素を除いて宇宙空間に追加されますので、borderプロパティは、幅の要素が増加します。あなたの取得スクロールバー

このstackoverflow linkが良い

謝罪を、それを説明し、なぜ

あなたの子供2要素はborderプロパティはthatsのいる、私は完全に質問を誤解しました。

あなたは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

を探しているそれはあなたがになっていたかを理解するために私にはかなり時間がかかりましたが、私は今理解だと思います。 child1テーブルで水平スクロールが表示されるときに、child2 divが親要素の全幅にまたがるようにします。

This guyは問題を非常によく説明しています。それを読んだ後に、あなたが達成しようとしていることは、あなたが持つJS構造を持つHTML構造では不可能であることがわかります。彼は親に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>