2

I have the following layout, it is a wrapper (content) which contains some other divs which also have some flex properties.

As you can see from the following link the divs inside content are now scaling up with the size of the content.

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  height: 100%;
}
<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

What I would like to achieve: - red, yellow, green divs should me height as the blue (content) div, so when scrolling you do not see the blue part in the bottom

How to achieve this? What is wrong with my code?

I support only latest chrome and I can use CSS3

2

5 Answers 5

1

Your .a is overflowing into .content which is why you see blue section being displayed at the bottom.

By giving .a or rather, all of the children div's an auto overflow, they will follow their parent's height and avoid content overflowing.

Though, it'll introduce a scrollbar. If you are comfortable with hiding the overflowed text, you can use overflow: hidden instead.

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.content > div {
  overflow: auto;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: yellow;
}

.c {
  width: 165px;
  margin-right: 15px;
  flex-grow: 1;
  background-color: green;
  height: 100%;
}
<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

0

I think the best option for your problem is either

  • moving overflow: auto; from the .content class to it's children.
  • changing the height: 400px; to min-height: 400px; if you have no problem with the container being larger than 400px;
  • adding a wrapper divwith height: 400px; and overflow: auto; around the .content and removing both rules from the .content(imo the best option)
0

Remove display: flex from .content and height: 100% from .a .b .c and then wrap your elements in a div and give it a display flex.

Working code:

.content {
  width: 100%;
  height: 400px;
  overflow: auto;
  background-color: blue;
}

.inner{
  display: flex;
}

.a {
  width: 165px;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
}
<div class="content">
<div class="inner">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>
  
</div>

0

You could possibly try:

flex: 1 1 auto

It sizes based on width/height properties..

check out Css Tricks article on it.

EDIT

Remove the flex-grow: 1 and it will be the height you need.

.content {


width: 100%;
  height: 400px;
  overflow: auto;
  background-color: blue;
}

.inner{
  display: flex;
}

.a {
  width: 165px;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
}

.c {
  width: 165px;
  margin-right: 15px;
  background-color: green;
}
2
  • where do I place it? could you provide me an example?
    – Radex
    May 13, 2019 at 7:33
  • I opened your example in chrome and used the developer console to remove the flex-grow CSS and the height is adjusted to the full height of the parent. May 13, 2019 at 8:03
0

The problem is here .a section overflow. As you bind the .content 400px height. So there are two ways, You could either free from them to bind height or use overflow scroll for .a section. You can compare the previous and fixed code below.

.content {
  width: 100%;
  /*height: 400px;*/
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  /*height: 100%;*/
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  /*height: 100%;*/
  box-sizing: border-box;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  /*height: 100%;*/
}
<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  height: 100%;
}
<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.