CODEWITHSUNDEEP
htmlcssflexbox
crotanite
crotanite

Reputation: 79

How to get flex child to expand when one element is hidden with tranform?

I am currently trying to learn how to use display: flexbox and I am trying to use it in a project that involves both main content and a sidebar that is hidden using the transform property.

However, the main content does not expand within the parent to the full width if the sidebar is hidden by a transform. How can I force the main content to go full width?

.parent {
  background-color: blue;
  display: flex;
}

.child {
  background-color: red;
  flex: 1 1;
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
}

JSFiddle: https://jsfiddle.net/Crotanite/d2vwhnk5/

Upvotes: 0

Views: 992

Answers (1)

Quentin
Quentin

Reputation: 3299

Use flex-basis to force the main content to take 100% of the width.
You can also use white-space: nowrap to prevent the child item to break into multiple lines.

body {
  margin: 0;
  overflow: hidden;
}

.parent {
  background-color: blue;
  display: flex;
  align-items: flex-start;
}

.child {
  background-color: red;
  flex: 1 0 100%; /* here */
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
  white-space: nowrap; /* and here */
}
<div class="parent">
  <div class="child">
    child
  </div>
  <div class="hidden-child">
    hidden child
  </div>
</div>

Upvotes: 1

Related Questions