6

Is there a CSS equivalent to vmin that is relative to the smaller dimension of the parent element rather than the viewport?

I have a page with a navigation panel on the left, so only part of the viewport width is available to the main content, and I am trying to have a responsive square that does not overflow from the main <div>. I found the code for the responsive square as an answer to this question, but the square's height overflows when in landscape mode.

I could use JavaScript by listening to window resizing to recompute the square's width as the minimal dimension between the parent's width and height, but in my actual website, the parent is most of the time in display: none so it has no width and I would like to avoid the need to recompute the dimensions when it appears.

Here's a JsFiddle with an example and backgrounds to highlight the issue : https://jsfiddle.net/wy874pqv/4/. Below is the code I used.

HTML :

<body>
  <div id="main">
    <div class="wrapper">
      <div class="one-by-one aspect-ratio"></div>
      <div class="content">
        <div class="circle">
        </div>
      </div>
    </div>
  </div>
  <div id="leftPanel">
  </div>
</body>

CSS : 

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}

div#leftPanel {
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
  margin: 0;
  background: red;
}

div#main {
  height: 100%;
  width: 80%;
  position: absolute;
  right: 0;
  margin: 0;
  background: yellow;
}

.wrapper {
  position: relative;
  width: 100%;
  background: rgba(0, 255, 0, 0.3);
}

.one-by-one.aspect-ratio {
  padding-bottom: 100%;
}

.wrapper > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10%;
}

.circle {
  position: relative;
  height: 100%;
  border: dashed 1px;
  border-radius: 50%;
}
Community
  • 1
  • 1
Anab
  • 265
  • 1
  • 9
  • Is this what you look for: https://jsfiddle.net/LGSon/wy874pqv/5/ – Asons May 17 '17 at 09:51
  • Btw, there is no `vmin` for other than viewport, but if the parents relation to the viewport is know, one might be able to achieve a similar effect using `calc()` – Asons May 17 '17 at 10:06
  • @LGSon thanks, this is precisely what I needed! Once again, simple things do the trick... – Anab May 17 '17 at 10:21

0 Answers0