Flex container's width doesn't expand when flex item is styled by aspect-ratio

Sempervivum 0
Viewed 35

I want to make a square element #board responsive.

Unfortunately, in landscape view, the flex container #wrap doesn't expand it's width to the width of the flex item #board. When I apply a fixed width and height to #board it does, thus the reason seems to be the aspect-ratio.

What's the reason for this, did I do anything wrong? How can I fix it?

I used this HTML and CSS:

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 26%, rgba(89, 177, 185, 1) 100%);
}

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid blue;
}

#timer,
#home {
  font-size: 7.5vh;
}

#board {
  flex: 1;
  background-color: lightblue;
  aspect-ratio: 1 / 1;
}
<div id="wrap">
  <div id="timer">00:00:00</div>
  <div id="board"></div>
  <div id="home">Home</div>
</div>

aspect-ratio flexbox css
1 Answers

Remove flex: 1 from #board and add height: 100% to it instead:

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 26%, rgba(89, 177, 185, 1) 100%);
}

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid blue;
}

#timer,
#home {
  font-size: 7.5vh;
}

#board {
  height: 100%;
  background-color: lightblue;
  aspect-ratio: 1 / 1;
}
<div id="wrap">
  <div id="timer">00:00:00</div>
  <div id="board"></div>
  <div id="home">Home</div>
</div>

SpyderScript0
Related