html - CSSのみを使用して、親の幅を子の合計幅に等しく設定しますか?

Question

.child含まれる要素の数はわかりませんが.parent、個々の幅はわかっています。

の幅を (各の幅) * (の総数).parentに等しくなるように設定したい.child.child

使いたくないですしfloats、width: auto;

calc()Javascriptを使わずに何かできますか?

**CSS : **

.parent {
  height: 100%;
  width: calc({number of children} * {width of each child = 100px});
}

.child {
  height: 100px;
  width: 100px;
}

HTML :

<div class="parent">
  <div class="child">
  <div class="child">
  <div class="child">
</div>

Answer 1

私はこれが少し遅れていることを知っていますが、これが同様の解決策を探している誰かに役立つことを願っています:

<div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>

トリックはinline-flexforparentとinline-tableforを使用することchildです。すべてがダイナミックです。次のように別のテーブルを追加して、テーブルを水平方向にスクロール可能にgrandparentしoverflow-x:scroll;ます。

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
        <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>
    </div>

Answer 2

Chromeを使用している場合は、使用できますmax-width: fit-content

ただし、他の主要なブラウザではまだサポートされていません。

更新: Kasper がコメントで 指摘したように、現在、ほとんどのブラウザーがサポートしています max-width: fit-content(ただし、Firefox の場合はベンダー プレフィックスが付いています)。

Answer 3

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }

.parent {
  height: 100%;
  display:inline-block;
  background:#bada55;
  font-size:0; /* clear whitespace*/
}

.child {
  height: 100px;
  width: 100px;
  border:1px solid red;
  display:inline-block;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 4

.parent{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.child {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1; 
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>

</div>