Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Flexbox child overflowing because containing image

body {
    background-color: rgb(28,38,60);
    font-family: 'Ubuntu', sans-serif;
}

* {
    box-sizing: border-box;
}

.team {
    display: inline-flex;
    padding: 10px;
    background: rgb(0 0 0 / 60%);
    border-radius: 20px;
    height: 130px;
    flex-direction: column;
    color: lightgray;
}

.team-info {
    display: inline-flex;
    height: 100%;
}

.team-compo {
    margin-right: 20px;
    padding-bottom: 10px;
    height: 100%;
}

.team-member {
    display: inline-block;
    font-size: 0;
    position: relative;
    margin: 0 5px;
    height: 100%;
}

.team-member > img {
    border-radius: 25px;
    height: 100%;
}

.team-member::after {
    content: "";
    height: 100%;
    width: 100%;
    border: 1px solid rgb(211 211 211 / 30%);
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: -1;
    border-radius: 25px;
}
<div class="team">
  <span class="rota-name">Some text</span>
  <div class="team-info">
    <div class="team-compo">
      <div class="team-member">
        <img src="https://cdn-icons-png.flaticon.com/256/1626/1626319.png" alt="">
      </div>    
    </div>
  </div>
</div>

Does anyone understand why the .team-info div exceeds the parent despite its height: 100% property.
It’s probably caused by the image, since removing it solves the problem, but I’d have to be able to keep it.

https://codepen.io/Akihiro-the-scripter/pen/yLryNOR

My goal is that whatever height is set in the .team div, the span should take the height it needs and .team-info the rest.

Tags:

2

Answers


  1. 0

    For a quick fix, add .team-info {min-height: 0;}. As it is not the only flex item in the column layout, so 100% height exceeds the container height.

    By default a flex item has min-height: auto, so it cannot shorter than its content.

    Fyi, the markup you have looks complicated for the job I think.

    body {
    background-color: rgb(28,38,60);
    font-family: 'Ubuntu', sans-serif;
}

* {
    box-sizing: border-box;
}

.team {
    display: inline-flex;
    padding: 10px;
    background: rgb(0 0 0 / 60%);
    border-radius: 20px;
    height: 130px;
    flex-direction: column;
    color: lightgray;
}

.team-info {
    display: inline-flex;
    height: 100%;
    min-height: 0; /*new*/
}

.team-compo {
    margin-right: 20px;
    padding-bottom: 10px;
    height: 100%;
}

.team-member {
    display: inline-block;
    font-size: 0;
    position: relative;
    margin: 0 5px;
    height: 100%;
}

.team-member > img {
    border-radius: 25px;
    height: 100%;
}

.team-member::after {
    content: "";
    height: 100%;
    width: 100%;
    border: 1px solid rgb(211 211 211 / 30%);
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: -1;
    border-radius: 25px;
}
    <div class="team">
  <span class="rota-name">Some text</span>
  <div class="team-info">
    <div class="team-compo">
      <div class="team-member">
        <img src="https://cdn-icons-png.flaticon.com/256/1626/1626319.png" alt="">
      </div>    
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    It is because you have 2 elements in .team and your are assigning 100% (to its parent) to one of them .team-info while you also still have .rota-name element. So you can give one 30% and the other 70%

    body {
    background-color: rgb(28,38,60);
    font-family: 'Ubuntu', sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(28,38,60);
    font-family: 'Ubuntu', sans-serif;
}

* {
    box-sizing: border-box;
}

.team {
    position: relative;
    display: inline-flex;
    padding: 10px;
    background: rgb(0 0 0 / 60%);
    border-radius: 20px;
    height: 80px;
    flex-direction: column;
    color: lightgray;
}

.rota-name{
    height: 30%;
    flex: 1;
}

.team-info {
    display: inline-flex;
    flex: 1;
    height: 70%;
}

.team-compo {
    margin-right: 20px;
    padding-bottom: 10px;
    height: 100%;
}

.team-member {
    display: inline-block;
    font-size: 0;
    position: relative;
    margin: 0 5px;
    height: 100%;
}

.team-member > img {
    border-radius: 25px;
    height: 100%;
}

.team-member::after {
    content: "";
    height: 100%;
    width: 100%;
    border: 1px solid rgb(211 211 211 / 30%);
    display: flex;
    position: absolute;
    top: 0px;
    left: 8px;
    z-index: -1;
    border-radius: 25px;
}
        <div class="team">
        <span class="rota-name">Some text</span>
        <div class="team-info">
          <div class="team-compo">
            <div class="team-member">
              <img src="https://cdn-icons-png.flaticon.com/256/1626/1626319.png" alt="">
            </div>    
          </div>
        </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search