layout example

by ShaCP

HTML

<div class="main-container">
  display: flex;
  <div class="main-container-should-conform-to-me sub-container">
    no width set
  </div>
  <div class="i-conform-to-the-container-width sub-container">
    <!-- I don't set the width, I adapt to the
container's width,  -->
    width: 0; min-width: 100%
    I conform to the width of my container
  </div>
  <div class="i-fill-up-the-remaining-height sub-container">
    flex: 1;
    fill up remaining height
    <div class="i-simulate-content">
     tall height
    </div>
  </div>
<!--     <div class="i-fill-up-the-remaining-height sub-container">
    flex: 1;
    fill up remaining height
      </div> -->
</div>

CSS

* {
  border: 1px solid blue;
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100%;
  /*   display: flex;
  flex-direction: column; */
  text-align: center;
}

html {
  height: 100%;
  font-size: 2rem;
  text-align: center;
}

.main-container {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  background-color: lightpink;
}

.sub-container {
  /* empty */
}

.main-container-should-conform-to-me {
  background-color: lightgreen;
}

.i-conform-to-the-container-width {
  width: 0;
  min-width: 100%;
  /* white-space: nowrap; */
  background-color: lightskyblue;
}

.i-fill-up-the-remaining-height {
  /* height: 0%; */
  flex: 1;
  background-color: yellow;
  overflow: auto;
}

.i-simulate-content {
  height: 1000px;
}

/* make the window smaller and see how it only
scroll once the content is too big to fit */