container 높이는 자식 중 하나에 맞게 조정되고 다른 자식은 container에 맞게 조정 됨 [중복]

질문

This question already has answers here:

How can you set the height of an outer div to always be equal to a particular inner div? (2 answers)

Closed last month.

예:

.left {
  width: calc(50% - 10px);
  float: left;
}

.right {
  background-color: green;
  width: calc(50% - 10px);
  float: right;
  height: 100px;
}

    <div class="container">
      <div class="title">Title</div>
      <div class="inner-container">
        <img
          class="left"
          src="http://mirrors.mi.ras.ru/CTAN/macros/latex/contrib/incgraph/exaimage-0001.png"
        />
        <div class="right"></div>
      </div>
    </div>

Expand snippet

다음은 codesandbox 입니다. 그렇게.

답변1

float 를 제거하고 부모에게 display : flex 를 제공합니다.

.inner-container {
  display: flex;
}

.left {
  width: calc(50% - 10px);
}

.right {
  background-color: green;
  width: calc(50% - 10px);
}

<div class="container">
  <div class="title">Title</div>
  <div class="inner-container">
    <img class="left" src="http://mirrors.mi.ras.ru/CTAN/macros/latex/contrib/incgraph/exaimage-0001.png" />
    <div class="right"></div>
  </div>
</div>

Expand snippet

답변2

.inner-container{
        height: 300px;
    }
    .left {

  width: calc(50% - 10px);
  float: left;
}

.right {
  background-color: green;
  width: calc(50% - 10px);
  float: right;
  height: 100%;

<div class="container">
      <div class="title">Title</div>
      <div class="inner-container">
        <img class="left" src="http://mirrors.mi.ras.ru/CTAN/macros/latex/contrib/incgraph/exaimage-0001.png"
        />
        <div class="right"></div>
      </div>
    </div>

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/62682334/container-height-adapts-to-one-of-its-child-and-the-other-child-adapts-to-contai