Dean Mraz

I am passionate about delivering ideas and spending most of my time on product management techniques.

September 14th 2017

Finally, HTML/CSS Master Detail View via Flexbox

DM Master Detail

I've been searching my whole development career for a master detail solution. My previous implementations required hacky css and javascript and never fully delivered. The flexbox solution is clean and pure html/css.

HTML

<body>
  <div class="master-detail">
    <div class="master">
      <div class="scroll">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
      </div>
    </div>
    <div class="detail">
      <div class="scroll">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ullamcorper turpis, nec posuere nisi. Mauris imperdiet, urna non porta vestibulum, nisl libero dapibus purus, nec egestas quam risus placerat nisl. Donec a mi eget tortor ultrices convallis.
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vestibulum auctor mi quis consequat. Curabitur imperdiet porttitor leo, vel consequat nisl iaculis eget. Donec porta sodales lobortis. Mauris ullamcorper,
          sapien et blandit viverra, erat sapien ullamcorper dolor, ut feugiat nulla odio vehicula sapien. Ut lobortis, lacus eget cursus tincidunt, lectus augue vehicula neque, eget cursus lorem neque in ipsum. Proin dignissim condimentum quam, eu pharetra
          risus faucibus at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ullamcorper turpis, nec posuere nisi. Mauris imperdiet, urna non porta vestibulum, nisl libero dapibus purus, nec egestas quam risus placerat nisl. Donec a mi eget tortor ultrices convallis.
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vestibulum auctor mi quis consequat. Curabitur imperdiet porttitor leo, vel consequat nisl iaculis eget. Donec porta sodales lobortis. Mauris ullamcorper,
          sapien et blandit viverra, erat sapien ullamcorper dolor, ut feugiat nulla odio vehicula sapien. Ut lobortis, lacus eget cursus tincidunt, lectus augue vehicula neque, eget cursus lorem neque in ipsum. Proin dignissim condimentum quam, eu pharetra
          risus faucibus at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ullamcorper turpis, nec posuere nisi. Mauris imperdiet, urna non porta vestibulum, nisl libero dapibus purus, nec egestas quam risus placerat nisl. Donec a mi eget tortor ultrices convallis.
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vestibulum auctor mi quis consequat. Curabitur imperdiet porttitor leo, vel consequat nisl iaculis eget. Donec porta sodales lobortis. Mauris ullamcorper,
          sapien et blandit viverra, erat sapien ullamcorper dolor, ut feugiat nulla odio vehicula sapien. Ut lobortis, lacus eget cursus tincidunt, lectus augue vehicula neque, eget cursus lorem neque in ipsum. Proin dignissim condimentum quam, eu pharetra
          risus faucibus at.
        </p>
      </div>
    </div>
  </div>
</body>

CSS

html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

.master-detail {
  display: flex;
  flex-direction: row;
  height: 100%;
  flex: 1 1 auto;
}

.master-detail > .master,
.master-detail > .detail {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
}

.master-detail > .master {
  background: #EAEAEA;
  border: 1px solid #CCC;
  flex: 1;
}

.master-detail > .detail {
  background: #f0f0f0;
  flex: 2;
}

.scroll {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0px;
  height: 100%;
  padding: 10px;
}

.item {
  background: white;
  border-radius: 5px;
  margin: 5px;
  padding: 20px;
}

https://jsfiddle.net/adinoblur/qhpko0uo/4/