css pos system layout with flex

user_7346647 0
Viewed 147

I do want to develop a POS system layout based on this image.

enter image description here

The entire layout should fit into the display height.

The overflow of the item list should be scrollable.

Right side two boxes should take 50% of the display height and the first box should have the scrolling functionality.

This is what I have done so far. How do I achieve this using CSS?

body{
  min-height: 100vh;
  background-color:darkgray;
  margin:0
}
.container{
  display: flex;
  background-color:green;
  height:'100%';

}

.items-list{
  background-color:burlywood;
  flex:3
}

.order-details{
  background-color:coral;
  flex: 1;
}

.display-total{
  background-color:blueviolet
}

.item{
  background-color:white;
  padding: 1rem;
  border:1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="items-list">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
        <p class="item">item 5</p>
        <p class="item">item 6</p>
        <p class="item">item 7</p>
      </div>

      <div class="order-details">
        <div class="cart-items">
          <p class="item">item 1</p>
        </div>
        <div class="display-total">Total</div>
      </div>
    </div>
  </body>
</html>

flexbox css
2 Answers

The key is in assigning overflow-y: scroll to the scrollable divs, then ensuring their height is restricted so that they're forced to scroll.

Here's an example snippet:

body {
  height: 100vh;
  background-color: darkgray;
  margin: 0
}

.container {
  display: flex;
  background-color: green;
  height: 100%;
}

.items-list {
  background-color: burlywood;
  flex-basis: 50%;
  overflow-y: scroll;
}

.order-details {
  display: flex;
  flex-direction: column;
  background-color: coral;
  flex-basis: 50%;
}

.cart-items {
  flex-basis: 50%;
  overflow-y: scroll;
}

.display-total {
  background-color: blueviolet;
  flex-basis: 50%;
}

.item {
  background-color: white;
  padding: 1rem;
  border: 1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <div class="items-list">
      <p class="item">item 1</p>
      <p class="item">item 2</p>
      <p class="item">item 3</p>
      <p class="item">item 4</p>
      <p class="item">item 5</p>
      <p class="item">item 6</p>
      <p class="item">item 7</p>
    </div>

    <div class="order-details">
      <div class="cart-items">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
      </div>
      <div class="display-total">Total</div>
    </div>
  </div>
</body>

</html>

user_91273930

Do you like this? I added overflow-y: scroll; for the scrollable,
and I added height: 50%; to the .display-total and cart-items so two boxes will take 50% height.

and it works!

body{
  min-height: 100vh;
  background-color:darkgray;
  margin:0
}
.container{
  display: flex;
  background-color:green;
  height: 100%;
}

.items-list{
  background-color:burlywood;
  flex:3;
  overflow-y: scroll;  /* I added this */
}

.order-details{
  background-color:coral;
  flex: 1;
}

.display-total{
  background-color:blueviolet;
  height: 50%; /* I added this */
}

.item{
  background-color:white;
  padding: 1rem;
  border:1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;

}
.cart-items {
  overflow-y: scroll;  /* I added this */
  height: 50%;  /* I added this */
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="items-list">
        <p class="item">item 1</p>
        <p class="item">item 2</p>
        <p class="item">item 3</p>
        <p class="item">item 4</p>
        <p class="item">item 5</p>
        <p class="item">item 6</p>
        <p class="item">item 7</p>
      </div>

      <div class="order-details">
        <div class="cart-items">
          <p class="item">item 1</p>
        </div>
        <div class="display-total">Total</div>
      </div>
    </div>
  </body>
</html>

user_140918770
Related