CODEWITHSUNDEEP
cssflexboxcss-position
Scoob
Scoob

Reputation: 541

How do I set an element's width while still allowing text to stretch it?

I have a flexbox and I would like my form-control (width: 100%) button to extend to the same length as the h2, not the h1. Unfortunately, because the div that both the h2 and the button are placed in does not have a width declared, the form-control class is extending the width of the button to the parent that has a width declared.

I have tried setting the parent div (.landing-header div) to position relative, and I have tried setting a min-width on it but it has not worked.

The reason I don't want to explicitly declare a width is because I don't want my h2 to wrap around, rather I want my h2 to dictate the width of the div and therefore the width of the button.

Screenshot:

screenshot

#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) {

}
<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>

Upvotes: 0

Views: 43

Answers (2)

Paulie_D
Paulie_D

Reputation: 114990

If you remove the flex characteristics from your landing-header div this is possible.

Then set the div holding the h2 and button to display:table and width:1%.

This will collapse the div to its own width.

Apply white-space:nowrap; to the h1 and h2 so the text doesn't wrap and...

#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>

Upvotes: 0

Rodrigo Ferreira
Rodrigo Ferreira

Reputation: 1091

To achieve what you wanted to do I would set display: inline-block to the parent div of the h2 and the button.

With this change your snippet will look like this:

enter image description here

Upvotes: 2

Related Questions