如何在允许文本拉伸的同时设置元素的宽度？

Question

我有一个flexbox，我希望我的表格控件（宽度：100％）按钮延伸到与h2相同的长度，而不是h1。不幸的是，因为放置h2和按钮的div没有声明宽度，所以form-control类将按钮的宽度扩展到声明宽度的父级。

我已经尝试将父div（.landing-header div）设置为相对位置，并且我已经尝试在其上设置最小宽度但是它没有工作。

我不想明确声明宽度的原因是因为我不想让我的h2环绕，而是我希望我的h2决定div的宽度，因此我想要宽度按钮。

截图：

screenshot

＆＃13;

＆＃13;

#landing-page {
    .row {
        height: 100vh;
    }

    .btn-custom {
        margin-top: 50px;
    }
}

.landing-header {
    padding-left: 5%;

    div {
        min-width: 60%;
    }
}

.landing-graphic {
    background: $blue;
    width: 40%;
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

}

＆＃13;

<div class="container-fluid">
    <div class="row d-flex flex-row justify-content-between align-items-stretch">
        <div class="landing-header d-flex flex-column justify-content-center">
            <h1>SAMUEL COLE</h1>
            <div>
                <h2>Web Development and Design</h2>
                <button class="btn form-control btn-custom about-nav">Get Started</button>
            </div>
        </div>
        <div class="landing-graphic">
            test
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要实现您想要的目标，我会将display: inline-block设置为div和h2的父button。

通过此更改，您的代码段将如下所示：

Answer 2

如果从landing-header div中删除弹性特征，则可以这样做。

然后将包含h2和button的div设置为display:table和width:1%。

这会将div折叠到自己的宽度。

将white-space:nowrap;应用于h1和h2，以便文字不会换行......

#landing-page .row {
  height: 100vh;
}

#landing-page .btn-custom {
  margin-top: 50px;
}

.landing-header {
  padding-left: 5%;
}

.landing-header div {
  min-width: 60%;
}

.landing-graphic {
  background: blue;
  width: 40%;
}

button.about-nav {
  background: limegreen;
}

.this-one {
  display: table;
  width: 1%;
}

.this-one h2 {
  white-space: nowrap;
  font-size: 14px;
}

.landing-header h1 {
  white-space: nowrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row d-flex flex-row justify-content-between align-items-stretch">
    <div class="landing-header ">
      <h1>SAMUEL COLE</h1>
      <div class="this-one">
        <h2>Web Development and Design</h2>
        <button class="btn form-control btn-custom about-nav">Get Started</button>
      </div>
    </div>
    <div class="landing-graphic">
      test
    </div>
  </div>
</div>