Question 241700 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make a div's width be the same as it's height when it's in a flexbox

I have a headerbar with the usual content. App-Logo, nav, some controls.

The navbar’s height is not set, but determined by its contents. It is a flex container.

Now I want the App-Logo to stretch to the vertical available space and maintain its aspect ratio.

Here is what it should look like:

Navbar Goal

Here is the code which achieves the image above:

.headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  aspect-ratio: 1 / 1; /* Not working */

  border-radius: 5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}
<div class="headerbar">
  <div class="logo"></div>
  <p>Link 1</p>
  <p>Link 2</p>
  <p>Link 3</p>
</div>

Link to code: https://jsfiddle.net/v2ta54eg/19/

As you can see, the logo is not visible. It seems to only stretch itself, as expected, but the aspect-ratio property has no effect on the width. The width stays 0.

What tried to do, was use aspect-ratio: 1 / 1 and I expected it to set the width to the same amount as the height. This is because the height is kind of set with aling-self: stretch.

So the question is:

How can I make a div have the same width as height, taking the height from the flex parent align-items: stretch / align-self: stretch?

Tags:

3

Answers


  1. 0

    Remove withd add these two values to the .logo

    .logo {
    aspect-ratio: 1/1; /*aspect ratio 1:1 (width/height) */
    flex: 0 0 auto; /* Prevent the logo from growing or shrinking */
}
    Login or Signup to reply.
  2. 0

    Please try editing your code and let me know if it works. HTML code is fina as of now.

    .headerbar {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  flex: 0 0 auto;  /* Makes sure the logo doesn't shrink or grow beyond its content */
  position: relative;
}

.logo::before {
  content: "";
  display: block;
  padding-top: 100%;  /* This ensures a 1:1 aspect ratio. Adjust if necessary. */
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  border-radius: 5px;
}
    Login or Signup to reply.
  3. 0

    align-items: stretch is not a height, or any other unit of length. It’s just a command that tells flex items to consume available space.

    aspect-ratio is not working because it doesn’t have enough to go on.

    If you add height to the container, it will work.

    .headerbar {
  display: flex;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
  height: 150px; /* NEW */
}

.logo {
  aspect-ratio: 1/1;
  flex: 0 0 auto;
  border-radius:5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}
    <html>
  <div class="headerbar">
    <div class="logo"></div>
    <p>Link 1</p>
    <p>Link 2</p>
    <p>Link 3</p>
  </div>
</html>

    OR, if you add width to the items, it will work:

    .headerbar {
  display: flex;
  gap: 1rem;
  padding: .5rem;
  background: #f0f0f0;
  border-bottom: 1px solid gray;
}

.logo {
  aspect-ratio: 1/1;
  flex: 0 0 150px; /* modified */
  border-radius:5px;
  background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}
    <html>
  <div class="headerbar">
    <div class="logo"></div>
    <p>Link 1</p>
    <p>Link 2</p>
    <p>Link 3</p>
  </div>
</html>

    But, it won’t work with just width: auto (i.e., flex-basis: auto).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search