Javascript Flexbox:自动宽度到页眉,自动到段落

Javascript Flexbox:自动宽度到页眉,自动到段落,javascript,html,css,flexbox,Javascript,Html,Css,Flexbox,我有一个flexbox div,即对齐开始和对齐开始。在这个div中有两个div,第一个包含h1,第二个包含段落 我正在尝试设置flexbox配置,以便div 1始终是标题(h1)的宽度,其余空间由段落的第二个div占用 以下是我的设置: <div class="flex flex-justify-start flex-align-start"> <div class="title"> <h1 id="landingHeader">He

我有一个flexbox div,即对齐开始和对齐开始。在这个div中有两个div,第一个包含h1,第二个包含段落

我正在尝试设置flexbox配置,以便div 1始终是标题(h1)的宽度,其余空间由段落的第二个div占用

以下是我的设置:

<div class="flex flex-justify-start flex-align-start">
    <div class="title">
        <h1 id="landingHeader">Headline</h1>
    </div>

    <div class="text">
        <p>Duis porttitor, neque in egestas pretium, nisl velit facilisis turpis, nec scelerisque nibh est faucibus purus. Nam ullamcorper facilisis turpis, sagittis varius turpis luctus in. Mauris pulvinar erat eget nisi tincidunt venenatis.</p>
    </div>
</div>

大字标题
两人一组,一人一组,一人一组,一人一组,一人一组,一人一组。南乌拉姆科佩尔facilisis turpis,南乌拉姆科佩尔facilisis turpis sagittis varius turpis luctus。毛里斯·普尔文纳·埃吉特·尼西·维尼纳蒂斯

我已经弄明白了。。。
它是将div.title设置为flex shrink属性为0,将div.text设置为flex grow属性为1,将flex shrink属性设置为1的组合

这就是您想要的吗@贾斯汀·布雷兰……不完全是。标题div(div1)必须扩展宽度以适应标题(h1)@Murphy1976我不太理解你的问题。也许可以为你想要完成的事情添加一个模型/线框。@Justin Breiland。。。好的,如果你在H1中输入“Headline Headline”,那么第二个单词就会流到下面,而不是你的代码笔在做什么。。。我希望H1所在的div的宽度向右扩展,导致包含段落的div缩小。@Murphy1976更新了我的笔,这应该是您要查找的内容。谢谢你的澄清。