자식 중 특정 한 개의 div의 크기에만 영향 받는 div 만들기

결과 사진

겉을 감싸고 있는 div가 오직 첫번째 div의 height에만 영향을 받는다.

 

 

처음에 이 문제를 해결하고자 했을 때, display flex에서 할 수 있는 모든 것은 다 해봤던 것 같다. flex-basis며 flex-grow며..... 검색 키워드조차 못 찾아서 이리저리 헤매다가 결국은 stack overflow에 있는 답을 찾았다.

https://stackoverflow.com/questions/48943233/how-can-you-set-the-height-of-an-outer-div-to-always-be-equal-to-a-particular-in

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

정답은 display flex가 아닌 position style에 있었다. flex로만 해결하는 것 자체가 불가능했던 듯....

<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

 

.container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow: auto;
}

.inner-alt>div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

 

답변자가 제시한 세 가지 답 중에 첫번째 답이 제일 이해하기 쉬웠다. 정말 단순하게 overflow를 주고 싶은 div에 position absolute를 줘서 height에 영향을 받지 않도록 하는 것이었다.