Why can I only see 1 column instead of 3 with Css?

April 27, 2023

I want to create 3 columns with CSS but why can I only see 1 column instead of 3 with CSS?

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}

<div class="container">
  <div class="column">
    <!-- First column content -->
    col 1
  </div>
  <div class="column">
    <!-- Second column content -->
    col 2
  </div>
  <div class="column">
    <!-- Third column content -->
    col 3
  </div>
</div>

https://jsfiddle.net/v1947art/

>Solution :

Because divs are block-level elements that will be displayed below each other by default. Add flexbox to the parent container:

.column {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

.column:first-child,
.column:last-child {
  width: 25%;
  min-width: 300px;
}

.column:nth-child(2) {
  width: 50%;
  min-width: 600px;
}

/* add flexbox to the parent */
.container {
  display: flex;
}

<div class="container">
  <div class="column">
    <!-- First column content -->
    col 1
  </div>
  <div class="column">
    <!-- Second column content -->
    col 2
  </div>
  <div class="column">
    <!-- Third column content -->
    col 3
  </div>
</div>