1つの要素の幅を兄弟の幅に依存させる

Question

私は、字幕をタイトルより長くすることはできないようなウィジェットを作ろうとしています。したがってタイトルはウィジェットの幅を制御し、タイトルよりも幅が広い場合は字幕が折り返されます。私は可能な限りJavaScriptを使わずにそれをやろうとしています。

私は近くになった（下記のスニペットを参照）。私は字幕を人工的に短くすることができましたが、その場合でも、何らかの理由でそれが入っている行が、子供が使用していたスペースの代わりに、コンテナの全体のスペースに収まるように拡張されました！実際、それが取り上げたスペースは、まるでラップされていなければ、まさにそれでしょう。

#container { 
 
    background: #DDD; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
#subtitle { 
 
    flex-basis: 0; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

私は流れ（ないposition:absolute）に字幕を維持する必要がある、とのタイトルは、それが超ロングなればラップできるようにする必要があります（ので、それだけでオフにこぼさないだろうページ）。 2つの行を1つずつ上下に並べる方法はありますか？もう一方の行の長さに限ります。

Answer 1

は、私にはCSSのテーブルのような音：タイトルの

#container { 
 
    background: #DDD; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.row > * { 
 
    display: table-cell; 
 
} 
 
.row:after { 
 
    content: " "; 
 
    display: table-cell; 
 
} 
 
#title { 
 
    width: 1px; 
 
    white-space: nowrap; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

width:1pxは、その列が崩壊する原因となります。 white-space:nowrapは、タイトルの折り返しを防止します。テーブルレイアウトを使用しているため、この組み合わせによって列の幅がタイトルによって決定され、サブタイトルが沿って表示されます。 :afterは、テーブルに記入するための柔軟な列を私たちに提供します。

（一度CSS Grid becomes available、好ましいことかもしれない。）

---

あなたは、長いタイトルを言及しました。その可能性がある場合は、Javascriptに切り替える必要があります。 （以下Javascriptがどこかの部分が影響を受けてか、ページのロード上で実行された後のいずれかである必要があります。）

var title = document.getElementById('title'), 
 
    subtitle = document.getElementById('subtitle'), 
 
    subtitleResize = function() { 
 
     subtitle.style.width = title.clientWidth + 'px'; 
 
    }; 
 
window.addEventListener('resize', subtitleResize, false); 
 
subtitleResize();

#container { 
 
    background: #DDD; 
 
} 
 

 
#title { 
 
    display:inline-block; 
 
}

<div id="container"> 
 
    <div class="row"> 
 
    <h1 id="title">Title that is fairly long</h1> 
 
    </div> 
 
    <div class="row"> 
 
    <h3 id="subtitle">Subtitle that is a long subtitle and that is even longer and oh it is just so super!</h3> 
 
    </div>   
 
</div>

Answer 2

をあなたは全幅

を行い、H1タグに white-space: nowrap;を追加しています

Please check the fiddle answer here