使一个元素的宽度取决于其兄弟的宽度

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），以及标题必须能包住如果它得到超长（所以它不会只是溢出关闭页）。 有没有办法有两行，一个在另一个之下，而且只能有另一个是一样长的？

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

你必须添加white-space: nowrap;到h1标签，这使得整个宽度

Please check the fiddle answer here