Two scrolling blocks in flex container-CodePudding

I need to build a card with two scrolling areas. Initial idea was to use flexbox so I came up with this:

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  min-width: 100px;
  min-height: 0;
  max-width: 80%;
  max-height: 80%;
  border: solid 1px black;
  padding: 10px;
}

.photo {
  background-color: silver;
  margin-bottom: 10px;
  aspect-ratio: 3;
}

.body {
  display: flex;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.title {
  background-color: silver;
  margin-bottom: 10px;
}

.text {
  flex: 1;
  background-color: cyan;
  min-height: 0;
  overflow: auto;
}

.photos {
  width: 100px;
  min-height: 0;
  overflow: auto;
}

.photos * ~ * {
  margin-top: 10px;
}

.thumbnail {
  background-color: lightgreen;
  aspect-ratio: 3;
}

<div >
  <div >Photo</div>
  
  <div >
    <div >
      <div >Title</div>
      <div  contenteditable>
        Full text<br>
        Can be multiline and with vertical scroll
      </div>
    </div>
    
    <div >
      <div >Thumbnail</div>
      <div >Thumbnail</div>
      <div >Thumbnail</div>
      <div >Thumbnail</div>
    </div>
  </div>
</div>

link to fiddle: https://jsfiddle.net/SkyLight/jxobz8qn/

The card has maximum width and height and Full text section (cyan one) can have pretty long content so that it should have scroll when needed. Thumbnails section can also have big amount of items so will also need to have scroll.

I know that overflow needs block to have height set in order to work but I can't figure out how to set it properly because the content should be limited mainly by Card's max size.

So can it be achieved with flexbox only or I'll need some other stuff? Would like to achieve the result with pure css.

CodePudding user response：

Make the card element a flexbox container then use flex:1 on the body:

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  min-width: 100px;
  min-height: 0;
  max-width: 80%;
  max-height: 80%;
  border: solid 1px black;
  padding: 10px;
  /* added */
  display: flex;
  flex-direction: column;
  /**/
}

.photo {
  background-color: silver;
  margin-bottom: 10px;
  aspect-ratio: 3;
}

.body {
  display: flex;
  flex:1; /* added */
  min-height:0;  /* added to make sure the content will shrink */
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.title {
  background-color: silver;
  margin-bottom: 10px;
}

.text {
  flex: 1;
  background-color: cyan;
  min-height: 0;
  overflow: auto;
}

.photos {
  width: 100px;
  min-height: 0;
  overflow: auto;
}

.photos * ~ * {
  margin-top: 10px;
}

.thumbnail {
  background-color: lightgreen;
  aspect-ratio: 3;
}

<div >
  <div >Photo</div>
  
  <div >
    <div >
      <div >Title</div>
      <div  contenteditable>
        Full text<br>
        Can be multiline and with vertical scroll
      </div>
    </div>
    
    <div >
      <div >Thumbnail</div>
      <div >Thumbnail</div>
      <div >Thumbnail</div>
      <div >Thumbnail</div>
    </div>
  </div>
</div>