CODEWITHSUNDEEP
cssflexbox
BoJack
BoJack

Reputation: 325

How to prevent button from taking up full width when using css flexbox?

I always run into this problem when I use flexbox to center my content, where my button ends up spanning the full width of the div. I want it to only take up the space it needs.

Code:

HTML:

                    <div class="who__text-content">
                        <h2 class="u-margin-bottom-2">Who</h2>
                        <h2 class="u-margin-left-2 u-margin-bottom-2">Lorem ipsum</h2>
                        <p class="u-margin-left-2 u-margin-bottom-6">Lorem ipsum</p>
                        <a href="#" class="btn u-margin-left-2">Meet The Team</a>
                    </div>

Sass:

.btn {
    padding: 1.3rem 3.7rem;
    width: auto;
}

.who {
    &__text-content {
        padding-bottom: 1.3rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: auto;
        height: 100%;
        <!-- I tried using the code bellow instead of the code above with position: relative; on the parent element. It ensures the button doesn't span the fullwidth but then all of the content becomes squished and doesn't use all the available space. -->
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
    }
}

Thanks in advance

Upvotes: 25

Views: 29016

Answers (3)

piouson
piouson

Reputation: 4545

In my case, the button is within another flex column container, simply using align-self disabled the growing width.

<!-- aligned button in flex column container -->
<div style="display: flex; flex-direction: column;">
  <button type="button" style="align-self: flex-start">Hello</button>
</div>

<!-- button in flex column container fills width -->
<div style="display: flex; flex-direction: column;">
  <button type="button">Hello</button>
</div>

Upvotes: 40

&#201;ric F&#233;role
&#201;ric F&#233;role

Reputation: 11

flex-basis: auto; worked for me

Upvotes: 1

Joe
Joe

Reputation: 948

display: inline-block should do it. It's weird though, <a> should never be block level so shouldn't fill 100% anyway. I'm assuming the margin class has a block display? You can also remove width: auto from the .btn class as width should do nothing to anchor tags, while they're default inline anyway. With inline-block active you can set a width, or using flex:1 to fill all space for example.

Edit: The issue is the align-content. Snippet below to show working example.

Please see this post for some information on align-content vs align-items.

.who__text-content {
        background:orange;
        padding-bottom: 1.3rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        height: 100%;
        width:400px;
}

.btn {
  padding: 1.3rem 3.7rem;
  background:black;
}
<div class="who__text-content">
  <h2 class="u-margin-bottom-2">Who</h2>
  <h2 class="u-margin-left-2 u-margin-bottom-2">Lorem ipsum</h2>
  <p class="u-margin-left-2 u-margin-bottom-6">Lorem ipsum</p>
  <a href="#" class="btn">Meet The Team</a>
</div>

Upvotes: 2

Related Questions