Html Question posted in
Some basic documentation can be found here.

Html – css max height on parent with overflow on child

How to make .col element 100% of .container?

.wrapper {
  max-height: 300px;
  display: flex;
}

.container {
  flex-grow: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}
<div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

result

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you Pete, simple wrapping .container with div without flx is working.

    .wrapper {
  max-height: 300px;
  display: flex;
}

.overflow-wrapper {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.container {
  display: flex;
  gap: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}
    <div class="wrapper">
  <div class="overflow-wrapper">
    <div class="container">
      <div class="col">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
      <div class="col">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
    </div>
  </div>
</div>


  2. 0

    If you want it to go full width and put the Elements under each user simply give the Container "flex-direction: column;"

    .wrapper {
  max-height: 300px;
  display: flex;
}

.container {
  flex-grow: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
  flex-direction: column;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}
    <div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You can use:

    align-items: start;

    On your .container element. I am not expert especially with these max-height and overflow, but it seems to make the deal.

    .wrapper {
  max-height: 300px;
  display: flex;
}

.container {
  flex-grow: 1;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 10px;
  align-items: start;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  background-color: blue;
}

.child {
  height: 100px;
  min-height: 100px;
  background: rgba(189, 66, 66, 0.226);
}
    <div class="wrapper">
  <div class="container">
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
    <div class="col">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search