split and fill vertical html divs
  To split and fill vertical HTML Divs, you can use the following code:

HTML:
```html
<div class="container">
  <div class="div-1">Content of div 1</div>
  <div class="div-2">Content of div 2</div>
  <div class="div-3">Content of div 3</div>
</div>
```
CSS:
```css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh; /* adjust height as needed */
}

.div-1,.div-2,.div-3 {
  flex: 1; /* adjust flex value as needed */
  margin: 10px; /* adjust margin value as needed */
}
```
In this example, we have a container div with three child div elements. We have set the container div to have a display of flex, a flex direction of column, and an align-items of center. This will center the child div elements vertically within the container.

We have also set the flex property on each child div to 1, which means that they will take up an equal amount of space within the container. Finally, we have added a margin of 10px to each child div to create
To split and fill vertical HTML divs, you can use the CSS property `display: flex;` along with `flex-direction: column;` to create a vertical layout. Here's an example:

HTML:
```html
<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
</div>
```
CSS:
```css
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fill the entire viewport height */
}

.box {
  flex: 1; /* fill the available space equally */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
```
In this example, the `.container` div is set to `display: flex;` with `flex-direction: column;` to create a vertical layout. The `height: 100vh;` property ensures that the container fills the entire viewport height.

Each `.box` div is set to `flex: 1;` to fill the available