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

Html – How can I set the height of a square to be the same as the one of its flexbox siblings with CSS?

I am trying to implement a layout similar to this:
.

The requirement I have is to create two adjacent boxes: one that contains multiline, dynamic, text and the other that must be a square whose side is determined by its sibling’s height.

The problem is that i am not able to set the dimensions of the square based on the implicit height of the parent / sibling.

I tried to put the two divs (square+text) in a flex container and to set the aspect-ratio of the square div to 1, but even if the align-items property on the parent is set to stretch the height is not taken in to account when calculating the ratio.

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui;
  margin-left: 2rem;
}

.wrapper {
  display: flex;
  border: 1px solid black;
  width: fit-content;
}

.square {
  width: 100px;
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

.text {
  padding: 0 1rem;
}

.text :last-child {
  margin-bottom: 2rem;
}
<div class="wrapper">
  <div class="square"></div>
  <div class="text">
    <h1>Some text of different sizes</h1>
    <p>Some other text that may be present</p>
  </div>
</div>

Here is a link of a codepen with the setup.

Tags:

2

Answers


  1. 0

    Use .wrapper { display: grid; } and .square { height: 0; min-height: 100%; } trick:

    * {
  box-sizing:border-box;
}

body {
  font-family: system-ui;
  margin-left: 2rem;
}

.wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid black;
  width: fit-content;
}

.square {
  height: 0;
  min-height: 100%;
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

.text {
  padding: 0 1rem;
}

.text :last-child {
  margin-bottom: 2rem;
}
    <div class="wrapper">
  <div class="square"></div>
  <div class="text">
    <h1>Some text of different sizes</h1>
    <p>Some other text that may be present</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    It auto adjusts to screen size and expands depending on the
    amount of text.

     <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin:0;
          padding:0;
        }
    
        body,html {
          height:100%;
          width:100%;
          display:flex;
          align-items:center;
          justify-content:center;
        }
    
        .container {
          width:500px;
          height:230px;
          box-shadow:2px 2px 12px 2px #efefef;
          border:1px solid #efefef;
          border-radius:6px;
          display:flex;
        }
    
        .container .left {
          width:30%;
          height:100%;
          background:#575656;
        }
    
        .container .right {
          width:70%;
          height:100%;
          background:#efefef;
        }
    
        .right .toptext {
          width:100%;
          height:50%;
          background:#efefef;
          display:flex;
          align-items:center;
          justify-content:center;
          border-bottom:1px solid #e7d8d8;
        }
    
        .right .bottomtext {
          width:100%;
          height:50%;
          background:#efefef;
          display:flex;
          align-items:center;
          justify-content:center;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="left"></div>
        <div class="right">
          <div class="toptext">
            <p>top</p>
          </div>
          <div class="bottomtext">bottom</div>
        </div>
      </div>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search