親divが子divと同じ幅ではない

Question

幅が指定されていない親<div>と、固定幅が指定された子の<div>があり、ウィンドウが固定幅より小さい場合... CSS/HTMLの親の<div>の結果は、子の固定幅ではなくウィンドウの幅にすぎませんか？次のスニペットを使用して

、親が赤の背景色を持っている...と子供はそれがに住むのウィンドウよりも道大きい。

あなたはスニペットを実行し、ウィンドウを右にスクロールする場合子供がもっと大きくなっているにもかかわらず、親の赤い背景は窓自体と同じ幅しかないことがわかります。

#parent { 
 
    background-color:red; 
 
} 
 
#child { 
 
    width:1000px; 
 
}

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

親が子供と少なくとも同じ大きさでなければならないことを意味簡単なCSSコマンドは、具体的min-width:1000px

Answer 1

ことによってのようなものでサイズを設定せず、ありますデフォルトdiv要素はとてもその幅がその親のか、この場合bodyまたはhtmlの幅に等しいdisplay: blockを持っています。

しかし、あなたが#parent要素にinline-blockにdisplayを設定した場合、今その要素は、その内容の幅や、この場合の最大の子要素の#child要素としての幅と同じになります。

#parent { 
 
    background-color:red; 
 
    display: inline-block; 
 
} 
 
#child { 
 
    width:1000px; 
 
}

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

Answer 2

これは、あなたが探している解決策になるかもしれません：

#parent{ 
    background-color : red; 
    display : inline-block; 
} 
#child { 
    width:1000px; 
} 

またはfloatを使用します。

#parent{ 
    background-color : red; 
    float: left; 
    clear: both; 
} 
#child { 
    width:1000px; 
} 

https://codepen.io/powaznypowazny/pen/eWYNZE