divを含むdivを子要素の幅にするにはどうすればよいですか？

Question

fave_holdはdivを含む100％のままにしておきたいと思いますが、.favesの子要素の幅のみを使用したいと思います。子要素は動的にレンダリングされ、定義された幅を持ちます。

ここにReact/JSXがあります。

<div id = 'fave_hold'> 
    {this.props.MenuFave.current === '1' && 
     <div className = 'faves' id = 'fave_hold_arc' > 
     {tags1} 
     </div> 
    } 
    {this.props.MenuFave.current === '280' && 
     <div className = 'faves' id = 'fave_hold_news' > 
     {tags280} 
     </div> 
    } 
    {this.props.MenuFave.current === '268' && 
     <div className = 'faves' id = 'fave_hold_news' > 
     {tags268} 
     </div> 
    } 
    </div> 
</div> 

は、ここで私は無駄にディスプレイをいじるしようとしているCSS

#fave_hold{ 
    width: 100%; 
    height: 100%; 
} 
.faves{ 
    height: 100%; 
} 

です。

ここはスクリーンショットです。

最終目標は、コンテンツを中央にあります。そして、これは私がそれをやりたいのです。

ここにオンラインプロトタイプがあります。

Answer 1

あなたの子供はfloatに設定されているため、子供は流れていないので、親はそのサイズを無視します。
私は別のアプローチのために行くとfloatを削除し、flexを使用します。

.faves { 
    display: flex; 
    justify-content: space-around; 
    flex-wrap: wrap; 
} 

そして.bookmark_pageからposition:relativeと 'フロート' を削除します。
ですから、このような何かを残し：

、小さな画面上：

編集

あなたは、このような結果を得る必要があり、これらの変更により

.bookmark_page { 
    border-radius: 4px; 
    width: 250px; 
    margin: 6px; 
    border: 6px solid white; 
    box-shadow: 0px 1px 3px rgba(34,25,25,0.4); 
    -webkit-box-shadow: 0px 1px 3px rgba(34,25,25,0.4); 
} 

どうすれば各子要素の一番下にある混乱を取り除くことができますか？

私はちょうどあなたが底に子供「混乱」を意味気づきました。
あなたが望む結果を得るために.favesこのように設定することができます

​​

iが設定検討する子供ビット高いwidth（.bookmark_page）、多分260px。

結果：あなたは `.faves`がその子の` width`を取得したい場合

Answer 2

あなたのお気に入りはdisplay: inline-flexです。