0

I tried to program two buttons that are next to each other. They should have the same width / the smaller element should get the width of the biggest child. And they have to wrap as flexible as possible. (Responsive)

I tried display: inline-block for the parent, but obviously this works only for elements that are with each other (Not side by side). I also tried working with display: inline-flex and flex-direction but again I ended up with elements that aren't side by side.
It's very easy with display: grid, however than I can't make it as flexible and responsive.

Since this problem is very specific (I think), I made an codepen: https://codepen.io/obendev/pen/vYYJGxj

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.buttons-grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 4rem;
}

.button a {
  align-items: center;
  background-color: #ffcf2f;
  border-radius: 80px;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 1.375rem 2.75rem;
  text-transform: uppercase;
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (hover: hover) {
  .button a:hover {
    background-color: #0562af;
  }
}
.button a svg {
  fill: currentColor;
  height: 1rem;
  margin-right: 0.375rem;
  width: 1rem;
}

.site-width {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding: 2rem 3.125rem;
}

a {
  color: currentColor;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
}
<div class="site-width">
    <div class="buttons">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>

    <div class="buttons-grid">
        <div class="button">
            <a href>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                    <path d="M62.2 45.2l-14-6c-1.2-.5-2.7-.2-3.5.9l-6.2 7.6c-9.7-4.6-17.6-12.4-22.1-22.1l7.6-6.2c1-.8 1.4-2.3.9-3.5l-6-14c-.6-1.3-2-2.1-3.4-1.7l-13 3C1 3.4 0 4.6 0 6c0 32.1 26 58 58 58 1.4 0 2.6-1 2.9-2.3l3-13c.3-1.4-.4-2.9-1.7-3.5z"></path>
                </svg>
                <span>short</span>
            </a>
        </div>
        <div class="button">
            <a href>looooooooooooooong</a>
        </div>
    </div>
</div>

The bottom "solution" is the end result, I'm trying to get it to look like this, that's the solution with grid I talked about before.

Rob
  • 14,746
  • 28
  • 47
  • 65
obeN
  • 416
  • 1
  • 5
  • 16
  • Please post your code and desired output in the question itself. – BenM Oct 28 '19 at 13:26
  • In what way is your CSS-Grid option *not* responsive? Are you not using media queries? – Paulie_D Oct 28 '19 at 15:54
  • Hey @Paulie_D thank you for you quick response. I could use a media querie, however I'm trying to make it as flexible as possible, without a media querie or without an absolut value like a px or % value. – obeN Oct 28 '19 at 19:39
  • Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) – leonheess Aug 16 '21 at 18:58

0 Answers0