15

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

BoJack
  • 225
  • 1
  • 2
  • 7

3 Answers3

26

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>
piouson
  • 3,328
  • 3
  • 29
  • 29
2

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>
Joe
  • 918
  • 1
  • 8
  • 17
  • Thanks for the response. Did you mean use `display: inline-block` for the `.btn` or the `.who__text-content` class? Using `inline-block` for the `.btn` class doesn't do anything for me and then using it for the `.who__text-content` reverts the button to only use the needed space but then the content doesn't stay vertically central. So weird! Also, forget to mention that the margin class only has a margin property – BoJack Jan 26 '21 at 01:04
  • 1
    `align-items: center` instead of `align-content:center`. That should fix it. Also it will still fill the container just because you have so much padding on the `.btn` - that will become the biggest piece. I will update my post with a snippet – Joe Jan 26 '21 at 01:22
  • That solves the issue with the button, however, the design I'm creating doesn't align the items centrally on the horizontal axis. If you're curious, the design I'm trying to achieve is essentially the same as the who section on kota.co.uk. What I've settled for is assigning the button a max-width value which is equal to the value it would take up naturally. – BoJack Jan 26 '21 at 01:25
  • You don't need flex box for that. That will work with just text-align: left; If you want to use flex and have them in the center but aligned left, you can put a container around them, center align the container then inside have the elements text-align:left; – Joe Jan 26 '21 at 13:01
0

flex-basis: auto; worked for me

Éric Férole
  • 1